<!-- Copyright (C) 2016 NooBaa -->

<div class="row content-middle card-shadow pad">
    <div class="column greedy push-next">
        <h3 class="heading3">
            Part count for this object:
            {{partCount}}
        </h3>
        <span class="row">
            Data resiliency type: {{resilinecySummary}}
            <vr class="push-both-half"></vr>
            Number of resources: {{resourceCount}}
        </span>
    </div>

    <div class="column push-next"
        ko.tooltip="downloadTooltip"
        ko.visible="areActionsAllowed"
    >
        <a class="btn" download
            ko.click="onDownloadClick"
            ko.attr.href="s3SignedUrl" >
            Download Object
        </a>
    </div>

    <div ko.tooltip="previewTooltip"
        ko.visible="areActionsAllowed"
    >
        <button class="btn"
            ko.click="onPreviewFile">
            Preview Object
        </button>
    </div>
</div>

<list-details class="greedy"
    params="
        loading: !dataReady(),
        rows: rows,
        selected: ko.pc(selectedPart, onSelectPart, $component),
        idSelector: row => row.seq,
        buttonLabel: 'More Details'
    "
>
    <template name="row">
        <div class="row content-middle">
            <svg-icon class="push-next-half"
                ko.css="$item.state().css"
                ko.tooltip="$item.state().tooltip"
                params="name: $item.state().name"
            ></svg-icon>
            {{$item.summary}}
        </div>
    </template>

    <template name="details">
        <div class="column greedy hpad no-wrap" ko.with="partDetails">
            <div class="row content-middle">
                <h2 class="heading3 greedy push-next">Part {{partSeq}} Distribution Details</h2>
                <button class="icon-btn no-focus-ring" ko.click="onX">
                    <svg-icon class="icon-small" params="name: 'x'"></svg-icon>
                </button>
            </div>
            <hr class="push-next-half"/>
            <div class="greedy pad-right block-tables"
                ko.css.fade-in="fade"
                ko.event.animationend="onAnimationEnd"
                ko.foreach="blockTables"
            >
                <section class="column vpad">
                    <div class="row content-middle push-next-half">
                        <p class="row greedy push-next content-middle">
                            <span class="highlight push-next-half">{{label}}:</span>
                            {{policy}}

                            <!-- ko with: storage -->
                            <!-- ko if: tierIndex -->
                            | Resides in tier {{tierIndex}}
                            <!-- ko with: resources -->
                            on
                            <!-- ko if: $data.href -->
                            <a class="tag link no-focus-ring row content-middle cursor-pointer push-prev-half"
                                ko.attr.href="href"
                            >
                                <svg-icon class="icon-small highlight push-next-half"
                                    params="name: icon"
                                ></svg-icon>
                                {{text}}
                            </a>
                            <!-- /ko -->
                            <!-- ko ifnot: $data.href -->
                            <span class="tag push-prev-half" ko.tooltip="tooltip">
                                {{text}}
                            </span>
                            <!-- /ko -->

                            <!-- /ko -->
                            <!-- /ko -->
                            <!-- /ko -->
                        </p>
                        <!-- ko if: tooltip -->
                        <more-info-icon params="tooltip: tooltip"></more-info-icon>
                        <!-- /ko -->
                    </div>

                    <data-table class="content-box" params="
                        columns: columns,
                        visibleColumns: visibleColumns,
                        data: rows,
                    ">
                        <template name="marking">
                            <span class="tag"
                                ko.text="$data().text"
                                ko.tooltip="$data().tooltip"
                            ></span>
                        </template>
                    </data-table>
                </section>
            </div>
        </div>
    </template>
</list-details>
<hr>
<paginator params="
    itemCount: partCount,
    pageSize: ko.pc(pageSize, onPageSize, $component),
    page: ko.pc(page, onPage, $component)
"></paginator>
