<GridLayout>
    <RadListView (itemTap)="onTapItem($event)" [itemTemplateSelector]="templateSelector" [items]="reservations">
        <ng-template let-item="item" tkListItemTemplate>
            <GridLayout class="m-b-8" columns="auto auto * *" rows="auto">
                <Label class="fas" col="0" text="{{item.expanded ? downIcon : rightIcon}}"></Label>
                <Label [text]="item.idForDisplay + '. '" class="h5" col="1"></Label>
                <Label [text]="item.WarehouseItemReservationState" class="h5" col="2"></Label>
                <Label [text]="item.UserName" class="h5" col="3" horizontalAlignment="right"></Label>
            </GridLayout>
        </ng-template>

        <ng-template let-item="item" tkTemplateKey="expanded">
            <GridLayout class="m-b-8" columns="auto auto * *" rows="auto,auto,auto, auto, auto,auto">
                <Label class="fas" col="0" text="{{item.expanded ? downIcon : rightIcon}}"></Label>
                <Label [text]="item.idForDisplay + '. '" class="h5" col="1"></Label>
                <Label [text]="item.WarehouseItemReservationState" class="h5" col="2"></Label>
                <Label [text]="item.UserName" class="h5" col="3" horizontalAlignment="right"></Label>

                <StackLayout col="1" colSpan="4" row="1">
                    <LineInfoItem [value]="item.EstimatedStartDate" name="Od" type="date"></LineInfoItem>
                    <LineInfoItem [value]="item.EstimatedEndDate" name="Do" type="date"></LineInfoItem>
                    <LineInfoItem [value]="item.Person" name="Kontaktní osoba"></LineInfoItem>
                    <GridLayout (tap)="onPhoneTap(item)" class="line-info-item m-y-2" columns="* *" rows="auto"
                                visibility="{{item.Phone ? 'visible' : 'collapsed'}}">
                        <Label class="p-r-5" text="Telefon" textWrap="true"></Label>
                        <Label [text]="item.Phone" class="highlighted" col="1" textAlignment="right"
                               textWrap="true"></Label>
                    </GridLayout>
                    <GridLayout (tap)="onEmailTap(item)" class="line-info-item m-y-2" columns="* *" rows="auto"
                                visibility="{{item.Email ? 'visible' : 'collapsed'}}">
                        <Label class="p-r-5" text="Email" textWrap="true"></Label>
                        <Label [text]="item.Email" class="highlighted" col="1" textAlignment="right"
                               textWrap="true"></Label>
                    </GridLayout>
                    <StackLayout backgroundColor="Black" class="m-b-2" height="1"></StackLayout>
                </StackLayout>
            </GridLayout>
        </ng-template>
    </RadListView>
</GridLayout>
