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

    <GridLayout class="page page-content">
        <StackLayout>
            <StackLayout class="page-area">
                <SearchBar (clear)="onSearchClear()" (loaded)="onSearchLoaded()" (submit)="onSearchSubmit()"
                           class="darkWhiteBg" hint="Hledaný předmět" id="searchBar"></SearchBar>
                <GridLayout class="m-t-10" rows="auto auto">
                    <StackLayout (tap)="onFilterExpand()" horizontalAlignment="right" orientation="horizontal">
                        <Label text="FILTR"></Label>
                        <Label class="fas" text="{{filterExpanded ? downIcon : leftIcon}}"></Label>
                    </StackLayout>
                    <GridLayout class="m-r-15 m-b-5 m-l-15" columns="auto *" row="1" rows="auto auto auto"
                                visibility="{{filterExpanded ? 'visible' : 'collapsed'}}">
                        <Label row="0" text="Město:" verticalAlignment="bottom"></Label>
                        <TextField #city class="m-l-10" col="1" row="0"></TextField>
                        <Label row="1" text="Maximální cena:" verticalAlignment="bottom"></Label>
                        <TextField #maxPrice class="m-l-10" col="1" keyboardType="number" row="1"></TextField>

                        <Button (tap)="onFilterTap()" class="btn btn-primary btn-rounded" colSpan="2" row="2"
                                text="Filtrovat"></Button>
                    </GridLayout>
                </GridLayout>
            </StackLayout>
            <StackLayout class="page-area">
                <Label class="no-data" text="K půjčení není žádná položka." textWrap="true"
                       visibility="{{!itemsHolder || itemsHolder.length === 0 ? 'visible' : 'collapsed'}}"></Label>
                <ReservationList (tapItem)="makeReservation($event)" [items]="borrowableItems"
                                 visibility="{{itemsHolder && itemsHolder.length > 0 ? 'visible' : 'collapsed'}}"></ReservationList>
            </StackLayout>
        </StackLayout>
        <GridLayout [visibility]="(isLoading$ | async) || othersIsLoading ? 'visible' : 'collapsed'"
                    class="activity-indicator-wrapper">
            <ActivityIndicator [busy]="(isLoading$ | async) || othersIsLoading"></ActivityIndicator>
        </GridLayout>
    </GridLayout>
</Page>
    
    

