<Page class="page-container">
    <ActionBar flat="true">
        <NavigationButton text="Zpět" android.systemIcon="ic_menu_back" (tap)="onBackButton()"></NavigationButton>
        <Label class="action-bar-title" text="Upravit termín schůzky"></Label>
    </ActionBar>
    
    <FlexboxLayout
        *ngIf="(isLoading$ | async) == false" 
        class="page page-content" flexDirection="column" justifyContent="space-between" height="90%">
        <ScrollView *ngIf="meetingDateDetail$ | async as meetingDate"> 
            <StackLayout>
                <GridLayout class="menu-container page-area" columns="*" rows="auto">
                    <TopMenuItem (clickItem)="onSaveTap()" [column]="0" [disabled]="false"
                        [icon]="saveIcon" name="Uložit"></TopMenuItem>
                </GridLayout>
    
                <StackLayout class="page-area">
                    <GridLayout columns="*, *" rows="auto">
                        <Label text="Den v týdnu:" verticalAlignment="bottom"></Label>
                        <TextField (tap)="onTapWeekDaySelect()" editable="false" col="1" class="m-l-10" textAlignment="right" text="{{ meeting.WeekDay }}"></TextField>
                    </GridLayout>
        
                    <GridLayout columns="*, *" rows="auto">
                        <Label text="Čas začátku:" verticalAlignment="bottom"></Label>
                        <TextField (tap)="showTimeFromModal()" editable="false" col="1" class="m-l-10" textAlignment="right" text="{{ meeting.TimeFrom | duration }}"></TextField>
                    </GridLayout>
        
                    <GridLayout columns="*, *" rows="auto">
                        <Label text="Čas konce:" verticalAlignment="bottom"></Label>
                        <TextField (tap)="showTimeToModal()" editable="false" col="1" class="m-l-10" textAlignment="right" text="{{ meeting.TimeTo | duration }}"></TextField>
                    </GridLayout>
        
                    <GridLayout columns="*, *" rows="auto">
                        <Label text="Pravidelnost:" verticalAlignment="bottom"></Label>
                        <TextField col="1" class="m-l-10" textAlignment="right" [(ngModel)]="meeting.Periodicity"></TextField>
                    </GridLayout>
        
                    <GridLayout *ngIf="availablePlaces" columns="*, *" rows="auto">
                        <Label text="Klubovna:" verticalAlignment="bottom"></Label>
                        <TextField (tap)="onTapMeetingPlaceSelect()" 
                            editable="false" col="1" class="m-l-10" textAlignment="right" textWrap="true" text="{{ meeting.Occupation }}"></TextField>
                    </GridLayout>
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </FlexboxLayout>
    
    <GridLayout [visibility]="(isLoading$ | async) ? 'visible' : 'collapsed'"
                    class="activity-indicator-wrapper">
        <ActivityIndicator [busy]="(isLoading$ | async)"></ActivityIndicator>
    </GridLayout>
</Page>