<StackLayout class="page-area">
    <Label class="h4" text="Základní služby a platby"></Label>
    <RadListView *ngIf="services && services.length > 0" [itemTemplateSelector]="templateSelector" [items]="services">
        <ng-template let-i="index" let-item="item" tkListItemTemplate>
            <StackLayout padding="0">
                <GridLayout [visibility]="i === 0 ? 'visible' : 'collapsed'" columns="*, auto, auto" padding="0"
                            rows="auto">
                    <Label class="serviceName font-weight-bold" text="Služba"></Label>
                    <Label class="serviceUnit text-right font-weight-bold full-w" col="1" text="Jednotek"></Label>
                    <Label class="servicePrice text-right font-weight-bold full-w" col="2" text="Cena"></Label>
                </GridLayout>
                <GridLayout columns="*, auto, auto" padding="0" rows="auto">
                    <Label [text]="item.CallService" class="serviceName" textWrap="true"></Label>
                    <Label class="serviceUnit text-right" col="1"
                           text="{{item.BilledUnitFormat}} {{item.CallUnit}}"></Label>
                    <Label class="servicePrice text-right" col="2"
                           text="{{item.FinalPrice | number:'1.0-3'}} Kč"></Label>
                </GridLayout>
            </StackLayout>
        </ng-template>
    </RadListView>
    <Label *ngIf="!services || services.length == 0 || !enrollInvoiceItemForPhoneNumber" class="no-data"
           text="Číslo {{phoneNumber}} nebylo nalezeno v dané faktuře" textWrap="true"></Label>
</StackLayout>
