<div class="p-fluid" *ngIf="page">
    <div class="p-field p-grid">
        <label for="slug" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.LANG' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <p-dropdown [options]="languages" #dropDownLanguages [(ngModel)]="page.lang">
                <ng-template pTemplate="selectedItem">
                    <div class="country-item country-item-value">
                        <img src="assets/images/lang/64/{{dropDownLanguages.value}}.png" class="dropdown-flag" />
                        <span>{{dropDownLanguages.value}}</span>
                    </div>
                </ng-template>
                <ng-template let-country pTemplate="item">
                    <div class="country-item">
                        <img src="assets/images/lang/64/{{country}}.png" class="dropdown-flag" />
                        <span>{{country}}</span>
                    </div>
                </ng-template>
            </p-dropdown>
        </div>
    </div>    
    <div class="p-field p-grid mt-2">
        <label for="name" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.NAME' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <input id="name" type="text" pInputText [(ngModel)]="page.name" /> 
        </div>
    </div>
    <div class="p-field p-grid mt-2">
        <label for="name" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.COMMUNITY' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <p-dropdown [options]="communities" 
                placeholder="{{ 'PAGE_PROPERTIES_EDITOR.SELECT_COMMUNITY' | translate }}"
                [(ngModel)]="page.communityId" 
                filterBy="communityName"
                optionLabel="communityName"
                optionValue="communityid"
                [showClear]="true"
                (onChange)="communityChange(page.communityId)">               
            </p-dropdown>
        </div>
    </div>

    <div class="p-field p-grid">
        <div class="p-col-12 p-md-10 my-2">
            <p-checkbox [(ngModel)]="page.dynamic" [binary]="true"></p-checkbox>
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0 ml-2">{{ 'PAGE_PROPERTIES_EDITOR.DYNAMIC' | translate }}</label>
        </div>
        <div class="p-col-12 p-md-10 my-2">
            <p-checkbox [(ngModel)]="page.showInMenu" [binary]="true"></p-checkbox>
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0 ml-2">{{ 'PAGE_PROPERTIES_EDITOR.SHOW_IN_MENU' | translate }}</label>
        </div>
    </div>

    <div class="p-field p-grid" *ngIf="page.dynamic">
        <label for="slug" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.SLUG' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <input id="slug" type="text" pInputText [(ngModel)]="page.slug" /> 
        </div>
    </div>

    <div class="p-field p-grid" *ngIf="!page.dynamic">
        <label for="path" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.PATH' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <input id="path" type="text" pInputText [(ngModel)]="page.path" />
        </div>
    </div>

    <div class="p-field p-grid mt-2">
        <label for="path" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'PAGE_PROPERTIES_EDITOR.PERMISSION' | translate }}</label>
        <div class="p-col-12 p-md-10">
            <p-dropdown *ngIf="permissions"
                    filterBy="description"
                    optionLabel="description"
                    optionValue="id"
                    placeholder="{{ 'PAGE_PROPERTIES_EDITOR.PERMISSION' | translate }}"
                    [options]="permissions"
                    [filter]="true"
                    [showClear]="false"
                    [(ngModel)]="page!.permissionId"></p-dropdown>
        </div>
    </div>

</div>
