<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="Přehled rezervací/výpůjček" textWrap="true"></Label>
    </ActionBar>

    <GridLayout class="page page-content">
        <StackLayout>
            <StackLayout class="page-area">
                <GridLayout class="m-10 m-b-0" columns="auto,auto, auto *" rows="auto">
                    <Label (tap)="onSortTap()" text="Seřadit podle: " verticalAlignment="center"></Label>
                    <Label (tap)="onSortTap()" [text]="chosenSortType" class="" col="1" textWrap="true"
                           verticalAlignment="center"></Label>
                    <Label (tap)="onSortTap()" class="fas" col="2" text="&#xf107;"></Label>

                    <Label (tap)="showModalHelp()" [text]="helpIcon" class="fas help text-right" col="3"></Label>
                </GridLayout>
            </StackLayout>
            <StackLayout class="page-area">
                <Label class="no-data" text="Nemáte půjčený žádný majetek." textWrap="true"
                       visibility="{{!reservationBorrowed || reservationBorrowed.length === 0 ? 'visible' : 'collapsed'}}"></Label>

                <StackLayout
                        visibility="{{reservationBorrowed && reservationBorrowed.length > 0 ? 'visible' : 'collapsed'}}">
                    <ReservationBorrowedList (tapItem)="onTapItem($event)"
                                             [items]="reservationBorrowed"></ReservationBorrowedList>
                </StackLayout>
            </StackLayout>
        </StackLayout>

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