<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="Můj majetek" 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">
                    <TopMenuItem (clickItem)="newItem()" [disabled]="false" [icon]="newIcon"
                                 name="Přidat položku"></TopMenuItem>
                </GridLayout>

                <StackLayout class="page-area">
                    <SearchBar (clear)="onSearchClear()" (loaded)="onSearchLoaded()" (submit)="onSearchSubmit($event)"
                               class="darkWhiteBg" hint="Hledaný předmět" id="searchBar"></SearchBar>
                    <GridLayout class="m-t-5 m-b-2" columns="auto, *" rows="auto, auto">
                        <Label height="auto" text="Zobrazit i vyřazené: "></Label>
                        <Switch (checkedChange)="switchClicked($event)" [checked]="showDeleted" class="m-l-5"
                                col="1"></Switch>
                        <Label row="1" text="{{'Položek: ' + itemsAll.length}}"></Label>
                    </GridLayout>
                </StackLayout>

                <StackLayout class="page-area">
                    <Label class="no-data" text="Jednotka nevlastní žádný majetek." textWrap="true"
                           visibility="{{(!itemsAllHolder || itemsAllHolder.length === 0) ? 'visible' : 'collapsed'}}"></Label>
                    <Label class="no-data" text="Nebyl nalezen žádný majetek." textWrap="true"
                           visibility="{{((!itemsAll || itemsAll.length === 0) && itemsAllHolder.length > 0) ? 'visible' : 'collapsed'}}"></Label>

                    <MaterialUnitList (tapItem)="onTapItem($event)" [items]="itemsAll"></MaterialUnitList>
                    <!-- Delete line above and uncomment lines below after adding functionality for taking photos. -->
                    <!-- <MaterialUnitList [items]="itemsAll" itemsClass="h4" (tapItem)="onTapItem($event)"
                        (tapPhoto)="onTakePhotoTap($event)"></MaterialUnitList> -->
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </FlexboxLayout>
    <GridLayout [visibility]="(isLoading$ | async) || othersIsLoading ? 'visible' : 'collapsed'"
                class="activity-indicator-wrapper" rowSpan="2">
        <ActivityIndicator [busy]="(isLoading$ | async) || othersIsLoading"></ActivityIndicator>
    </GridLayout>
</Page>
