<!--<div class="peek-nav-section"></div>-->

<!--<div class="peek-nav-bar-padding">-->
<!--    <peek-core-device-cfg-connect></peek-core-device-cfg-connect>-->
<!--</div>-->

<div class="peek-nav-bar-padding">
    <div
        class="peek-information-section"
        *ngIf="(offlineCacheStatus$ | async) as status"
    >
        <h4>Offline Cache Service</h4>
        <p>
            State Machine State : <b>{{status.stateString}}</b> Next State :
            <b>{{status.nextStateString || 'None'}}</b> Timer :
            <b>{{status.secondsUntilNextStateCheckString || 'None'}}</b><br />
            Last Bandwidth Metric :
            <b>{{(bandwidthStatus$ | async).lastMetric || 'None'}}</b> Is Slow
            Network :
            <b
                >{{(bandwidthStatus$ | async).isSlowNetwork?.toString() ||
                'None'}}</b
            ><br />
            <!--            Last Cache Check Date : {{status.lastCachingCheckDate | date:-->
            <!--            'medium'}}<br />-->
            Last Cache Start Date : {{status.lastCachingStartDate | date:
            'medium'}}<br />
            Last Cache Complete Date : {{status.lastCachingCompleteDate | date:
            'medium'}}<br />
            Last Cache Abort Date : {{status.lastCachingAbortDate | date:
            'medium'}}<br />
        </p>
    </div>

    <div
        class="peek-information-section"
        *ngFor="let status of (offlineLoaderList$ | async)"
    >
        <h4>{{status.pluginName}} - {{status.indexName}}</h4>
        <p>
            Load Progress : <b>{{ status.percentCompleteString }}</b>, loading
            <b>{{ status.loadingQueueCount }}</b> chunks, server has
            <b>{{ status.totalLoadedCount || "?" }}</b> chunks, Has Completed
            Once : <b>{{status.initialFullLoadComplete }}</b><br />
        </p>
    </div>

    <div
        *ngIf="isForceCacheStartButtonEnabled"
        class="peek-information-section"
    >
        <button
            nz-button
            nzType="dashed"
            nzDanger
            (click)="forceCacheStartClicked()"
        >
            Force Cache Start
        </button>
    </div>
</div>
