<Page class="page-container">
    <ActionBar flat="true">
        <NavigationButton (tap)="onBackButton()" android.systemIcon="ic_menu_back" text="Zpět"></NavigationButton>
        <Label class="action-bar-title" text="Inventarizovat položky" textWrap="true"></Label>
    </ActionBar>

    <GridLayout class="page page-content" rows="auto, *">
        <GridLayout class="menu-container page-area" columns="*" rows="auto">
            <TopMenuItem (clickItem)="onSubmitInventory()" [disabled]="false" [icon]="confirmIcon" column="0"
                         name="Potvrdit"></TopMenuItem>
        </GridLayout>

        <StackLayout class="page-area" row="1">
            <Label class="no-data" text="Nejsou zde žádné položky k potvrzení." textWrap="true"
                   visibility="{{!items || items.length === 0 || !isAnyLocalChange ? 'visible' : 'collapsed'}}"></Label>

            <GridLayout rows="*, auto" visibility="{{items && items.length > 0 ? 'visible' : 'collapsed'}}">
                <RadListView #list (itemTap)="onTapItem($event)" [itemTemplateSelector]="templateSelector"
                             [items]="items" class="list-group" row="0" separatorColor="white">
                    <ng-template let-item="item">
                        <GridLayout columns="auto, *, auto" rows="{{item.expanded ? 'auto,auto' : 'auto'}}"
                                    visibility="{{item.localChange ? 'visible' : 'collapsed'}}">
                            <Label class="fas" col="0" text="{{item.expanded ? downIcon : rightIcon}}"></Label>
                            <Label [text]="item.DisplayName" class="h4" col="1" row="0" textWrap="true"></Label>
                            <Label (tap)="uninventorizeItem(item)" class="x" col="2" text="x"
                                   visibility="{{item.localChange ? 'visible' : 'collapsed'}}"></Label>
                            <Label></Label>
                            <StackLayout col="1" colSpan="2" row="1"
                                         visibility="{{item.expanded ? 'visible' : 'collapsed'}}">
                                <Label text="{{'Inventární číslo: ' + item.InventoryNumber}}"
                                       visibility="{{item.InventoryNumber ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Kategorie: ' + item.WarehouseItemCategory}}"
                                       visibility="{{item.WarehouseItemCategory ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Je na skladě: ' + (item.InWarehouse ? 'Ano' : 'Ne')}}"
                                       visibility="{{item.InWarehouse !== null ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Datum poslední inventorizace: ' + (item.InventoryDate | dateTime : false)}}"
                                       visibility="{{item.InventoryDate ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Datum pořízení: ' + (item.PurchaseDate | dateTime : false)}}"
                                       visibility="{{item.PurchaseDate ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Popis: ' + item.Description}}" textWrap="true"
                                       visibility="{{item.Description ? 'visible' : 'collapsed'}}"></Label>
                                <Label text="{{'Poznámka: ' + item.Note}}" textWrap="true"
                                       visibility="{{item.Note ? 'visible' : 'collapsed'}}"></Label>
                            </StackLayout>
                        </GridLayout>
                    </ng-template>
                </RadListView>

                <StackLayout row="1">
                    <StackLayout backgroundColor="gray" height="1"></StackLayout>
                    <Label class="m-5" color="gray"
                           text="Položky, které nechcete inventarizovat, můžete odebrat stisknutím 'x'. Inventarizaci potvrdíte tlačítkem 'Potvrdit'."
                           textWrap="true"></Label>
                </StackLayout>

            </GridLayout>
        </StackLayout>
        <GridLayout [visibility]="(isLoading$ | async) || othersIsLoading ? 'visible' : 'collapsed'"
                    class="activity-indicator-wrapper" rowSpan="2">
            <ActivityIndicator [busy]="(isLoading$ | async) || othersIsLoading"></ActivityIndicator>
        </GridLayout>
    </GridLayout>
</Page>
