<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]="item ? item.DisplayName : ''" textWrap="true"></Label>
    </ActionBar>

    <FlexboxLayout *ngIf="(isLoading$ | async) == false && othersIsLoading == false" class="page page-content"
                   flexDirection="column" height="90%" justifyContent="space-between">
        <ScrollView>
            <StackLayout>
                <GridLayout class="menu-container page-area" columns="*, *, *" rows="auto"
                            visibility="{{!item.DeletionDate ? 'visible' : 'collapsed'}}">
                    <TopMenuItem (clickItem)="updateItem()" [column]="0" [disabled]="false" [icon]="updateIcon"
                                 name="Upravit"></TopMenuItem>
                    <TopMenuItem (clickItem)="lendItem()" [column]="1" [disabled]="!canBeLent" [icon]="lendIcon"
                                 name="Vydat ze skladu"></TopMenuItem>
                    <TopMenuItem (clickItem)="deleteItem()" [column]="2" [disabled]="false" [icon]="trashIcon"
                                 name="Vyřadit"></TopMenuItem>
                </GridLayout>

                <StackLayout class="page-area">
                    <Image [src]="photo" loadMode="async" stretch="aspectFit"
                           visibility="{{photo ? 'visible' : 'collapsed'}}"></Image>

                    <GridLayout (tap)="onWarehouseTap()" class="line-info-item m-y-2" columns="*, *" rows="auto"
                                visibility="{{item.WarehouseName ? 'visible' : 'collapsed'}}">
                        <Label class="p-r-5" text="Sklad:" textWrap="true"></Label>
                        <Label [text]="item.WarehouseName" class="highlighted" col="1" textAlignment="right"
                               textWrap="true"></Label>
                    </GridLayout>
                    <LineInfoItem [value]="item.IsInWarehouse ? 'Ano' : 'Ne'" name="Je na skladě:"></LineInfoItem>
                    <LineInfoItem [value]="item.WarehouseItemCategory" name="Kategorie:"></LineInfoItem>
                    <LineInfoItem [value]="item.InventoryNumber" name="Inventární číslo:"></LineInfoItem>

                    <LineInfoItem *ngIf="item.Description" name="Popis:" value=" "></LineInfoItem>
                    <Label [text]="item.Description" class="m-l-10" textWrap="true"
                           visibility="{{item.Description ? 'visible' : 'collapsed'}}"></Label>
                    <LineInfoItem [value]="item.CommercialRent ? 'Ano' : 'Ne'"
                                  name="Komerčnímu zapůjčení:"></LineInfoItem>
                    <LineInfoItem [value]="item.UnitRent ? 'Ano' : 'Ne'" name="K zapůjčení skautům:"></LineInfoItem>
                    <LineInfoItem [value]="item.EventRent ? 'Ano' : 'Ne'" name="K zapůjčení na ú. akce:"></LineInfoItem>
                    <LineInfoItem *ngIf="item.CommercialRent || item.UnitRent || item.EventRent"
                                  [value]="item.RentPrice" name="Cena za půjčení za den" type="price"></LineInfoItem>

                    <LineInfoItem *ngIf="(item.CommercialRent || item.UnitRent || item.EventRent) && item.RentNote"
                                  name="Poznámka k ceně:" value=" "></LineInfoItem>
                    <Label [text]="item.RentNote" class="m-l-10" textWrap="true"
                           visibility="{{(item.CommercialRent || item.UnitRent || item.EventRent) && item.RentNote ? 'visible' : 'collapsed'}}"></Label>
                    <LineInfoItem [value]="item.PurchaseType" name="Způsob pořízení:"></LineInfoItem>
                    <LineInfoItem [value]="item.PurchaseDate" name="Datum pořízení:" type="date"></LineInfoItem>
                    <LineInfoItem *ngIf="item.PurchaseNote" name="Poznámka k pořízení:" value=" "></LineInfoItem>
                    <Label [text]="item.PurchaseNote" class="m-l-10" textWrap="true"
                           visibility="{{item.PurchaseNote ? 'visible' : 'collapsed'}}"></Label>
                    <LineInfoItem [value]="item.SerialNumber" name="Výrobní číslo:"></LineInfoItem>
                    <LineInfoItem [value]="item.AccountNumber" name="Číslo dokladu:"></LineInfoItem>
                    <LineInfoItem [value]="+item.PurchasePrice" name="Pořizovací cena:" type="price"></LineInfoItem>
                    <LineInfoItem [value]="+item.ActualPrice" name="Aktuální cena:" type="price"></LineInfoItem>
                    <LineInfoItem [value]="item.InventoryDate" name="Poslední inventarizace:"
                                  type="date"></LineInfoItem>
                    <LineInfoItem *ngIf="item.Note" name="Poznámka:" value=" "></LineInfoItem>
                    <Label [text]="item.Note" class="m-l-10" textWrap="true"
                           visibility="{{item.Note ? 'visible' : 'collapsed'}}"></Label>
                    <LineInfoItem *ngIf="item.DeletionDate" name="Vyřazeno:"
                                  value="{{'Ano (' + (item.DeletionDate | dateTime : false) + ')'}}"></LineInfoItem>
                    <LineInfoItem *ngIf="item.DeletionNote" name="Poznámka k vyřazení:" value=" "></LineInfoItem>
                    <Label [text]="item.DeletionNote" class="m-l-10" textWrap="true"
                           visibility="{{item.DeletionNote ? 'visible' : 'collapsed'}}"></Label>

                    <StackLayout visibility="{{reservations.length !== 0 ? 'visible' : 'collapsed'}}">
                        <Label class="h4" text="Rezervace"
                               visibility="{{reservations.length !== 0 ? 'visible' : 'collapsed'}}"></Label>
                        <MaterialReservationList (emailTap)="onEmailTap($event)" (phoneTap)="onCallTap($event)"
                                                 [reservations]="reservations"></MaterialReservationList>
                    </StackLayout>

                    <Label *ngIf="!item" class="no-data" text="O položce nejsou dostupné žádné informace."
                           textWrap="true"></Label>
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </FlexboxLayout>
    <GridLayout [visibility]="(isLoading$ | async) || othersIsLoading ? 'visible' : 'collapsed'"
                class="activity-indicator-wrapper">
        <ActivityIndicator [busy]="(isLoading$ | async) || othersIsLoading"></ActivityIndicator>
    </GridLayout>
</Page>
