<Page (loaded)="onLoad()" class="page-container">
    <ActionBar flat="true">
        <NavigationButton text="Zpět" android.systemIcon="ic_menu_back" (tap)="onBackButton()"></NavigationButton>
        <Label class="action-bar-title" text="{{'Inventarizace skladu: ' + nameWarehouse}}" textWrap="true"></Label>
    </ActionBar>

    <GridLayout class="page page-content" rows="auto,*">
        <GridLayout class="menu-container page-area" columns="* * *" rows="auto">
            <TopMenuItem (clickItem)="onScanTap()" [disabled]="false" [icon]="qrcodeIcon" column="0"
                         name="Skenovat kódy"></TopMenuItem>
            <TopMenuItem (clickItem)="toInventory()" [disabled]="false" [icon]="toInventoryIcon" column="1"
                         name="K potvrzení"></TopMenuItem>
            <TopMenuItem (clickItem)="toConfirmed()" [disabled]="false" [icon]="toConfirmedIcon" column="2"
                         name="Již inventarizováno"></TopMenuItem>
        </GridLayout>

        <GridLayout class="page-area" row="1" rows="*, auto">
            <Label class="no-data" text="Žádné položky k výběru." textWrap="true"
                visibility="{{!items || items.length === 0 || everyLocalChangeOrLastID ? 'visible' : 'collapsed'}}"></Label>

            <RadListView visibility="{{items && items.length > 0 ? 'visible' : 'collapsed'}}" #myListView row="0" [itemTemplateSelector]="templateSelector" [items]="items"
                class="list-group" separatorColor="white" (itemTap)="onTapItem($event)">
            
                <ng-template let-item="item">
                    <GridLayout rows="{{item.expanded ? 'auto,auto' : 'auto'}}" columns="auto, *, auto" visibility="{{(!item.localChange && !item.idLastInventory) ? 'visible' : 'collapse'}}">
                        <Label class="fas" col="0" text="{{item.expanded ? downIcon : rightIcon}}"></Label>
                        <Label row="0" col="1" [text]="item.DisplayName" textWrap="true" class="h4"></Label>
                        <Label class="fas"  [text]="checkIcon" col="2" (tap)="inventorizeItem(item)"></Label>
                        <StackLayout row="1" col="1" colSpan="2" visibility="{{item.expanded ? 'visible' : 'collapsed'}}">
                            <Label visibility="{{item.InventoryNumber ? 'visible' : 'collapsed'}}" text="{{'Inventární číslo: ' + item.InventoryNumber}}"></Label>
                            <Label visibility="{{item.WarehouseItemCategory ? 'visible' : 'collapsed'}}" text="{{'Kategorie: ' + item.WarehouseItemCategory}}"></Label>
                            <Label visibility="{{item.InWarehouse !== null ? 'visible' : 'collapsed'}}" text="{{'Je na skladě: ' + (item.InWarehouse ? 'Ano' : 'Ne')}}"></Label>
                            <Label visibility="{{item.InventoryDate ? 'visible' : 'collapsed'}}" text="{{'Datum poslední inventorizace: ' + (item.InventoryDate | dateTime : false)}}"></Label>
                            <Label visibility="{{item.PurchaseDate ? 'visible' : 'collapsed'}}" text="{{'Datum pořízení: ' + (item.PurchaseDate | dateTime : false)}}"></Label>
                            <Label visibility="{{item.Description ? 'visible' : 'collapsed'}}" text="{{'Popis: ' + item.Description}}" textWrap="true"></Label>
                            <Label visibility="{{item.Note ? 'visible' : 'collapsed'}}" text="{{'Poznámka: ' + item.Note}}" textWrap="true"></Label>
                        </StackLayout>
                    </GridLayout>
                </ng-template>
            </RadListView> 
            
            <StackLayout row="1">
                <StackLayout height="1" backgroundColor="gray"></StackLayout>
                <GridLayout row="auto" columns="* auto">
                    <Label class="m-5" color="gray" text="Naskenujte kódy nebo stisknutím fajfky přidejte položky k inventarizování. Poté inventarizaci potvrďte na stránce 'Potvrzení'." textWrap="true"></Label>
                    <Label class="fas help" [text]="helpIcon" (tap)="showModalHelp()" col="1"></Label>
                </GridLayout>
            </StackLayout>
        </GridLayout>

        <GridLayout [visibility]="othersIsLoading ? 'visible' : 'collapsed'"
                class="activity-indicator-wrapper" rowSpan="2">
            <ActivityIndicator [busy]="othersIsLoading"></ActivityIndicator>
        </GridLayout>
    </GridLayout>
</Page>
