<ng-container *ngIf="(vm$ | async) as vm">

    <div class="sub-panel-banner rounded">

        <scrm-image [image]="'eye'"></scrm-image>

        <span class="sub-panel-banner-text">
            {{vm.appStrings['LBL_SELECT_SUBPANEL_BANNER'] || ''}}
        </span>

        <scrm-image (click)="toggleSubPanels()"
                    [attr.aria-expanded]="!isCollapsed"
                    aria-controls="collapseShowSubPanels"
                    class="float-right"
                    [image]="toggleIcon">
        </scrm-image>
    </div>

    <div id="collapseShowSubPanels" [ngbCollapse]="isCollapsed">

        <div class="sub-panel-banner-buttons">
            <div
                class="sub-panel-banner-button d-flex flex-column d-flex justify-content-between rounded"
                *ngFor="let item of vm.subpanels | keyvalue"
                [ngClass]="{'sub-panel-banner-button-active': item.value.show === true}"
                (click)="showSubpanel(item.value)"
            >
                <div class="sub-panel-banner-button-icon">
                    <scrm-image [image]="item.value.getIcon()"></scrm-image>
                </div>

                <div class="sub-panel-banner-button-title text-truncate">
                    {{item.value.getTitle()}}
                </div>

                <div class="sub-panel-banner-button-stats" *ngIf="(item.value.statistics.state$ | async) as statistics">
                    <ng-container *ngIf="statistics.loading || !statistics.field">
                        <scrm-inline-loading-spinner></scrm-inline-loading-spinner>
                    </ng-container>
                    <ng-container *ngIf="statistics.field">
                        <scrm-field [type]="statistics.field.type"
                                    mode="list"
                                    [field]="statistics.field">
                        </scrm-field>
                    </ng-container>
                </div>
            </div>
        </div>
    </div>

    <div id="sub-panels">
        <ng-container *ngFor="let item of vm.subpanels | keyvalue">

            <scrm-subpanel class="sub-panel"
                           [store]="item.value"
                           [maxColumns$]="maxColumns$"
                           *ngIf="item.value.show">
            </scrm-subpanel>

        </ng-container>
    </div>
</ng-container>
