<ng-container *ngIf="list">

    <div class="grid mt-auto mx-0 px-3 surface-200">
        <div class="col text-xl mt-1">{{ 'PAGES.PAGES_LIST_TITLE' | translate }}</div>
        <div class="col text-right">
            <p-button label="{{ 'PAGES.NEW.NEW_PAGE' | translate }}" icon="pi pi-plus" iconPos="left" styleClass="p-button-danger" (onClick)="op.toggle($event)"></p-button>
            <p-overlayPanel #op>
                <ng-template pTemplate>
                    <div class="text-left">
                        {{ 'PAGES.NEW.CREATE_PAGE_INPUT' | translate }}:
                        <div class="p-inputgroup w-12 my-2">
                            <input #newPageName pInputText type="text" placeholder="{{ 'PAGES.NEW.CREATE_PAGE_PLACEHOLDER' | translate }}" />
                            <p-dropdown [options]="languages" #dropDownLanguages [ngModel]="'it'">
                                <ng-template pTemplate="selectedItem">
                                    <div class="country-item country-item-value">
                                        <img src="assets/images/lang/64/{{dropDownLanguages.value}}.png" class="dropdown-flag" />
                                        <!-- <div>{{dropDownLanguages.value}}</div> -->
                                    </div>
                                </ng-template>
                                <ng-template let-country pTemplate="item">
                                    <div class="country-item">
                                        <img src="assets/images/lang/64/{{country}}.png" class="dropdown-flag" />
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </div>

                        <div class="text-left">
                            <p-button label="{{ 'PAGES.NEW.CREATE_PAGE_BUTTON' | translate }}" icon="pi pi-check" iconPos="left" styleClass="p-button-success" (onClick)="newPage(newPageName, op, dropDownLanguages.value)"></p-button>
                        </div>
                    </div>
                </ng-template>
            </p-overlayPanel>
        </div>
    </div>

    <app-pages-list 
        [pages]="pages" 
        (externalLink)="viewPageBySlug($event)"
        (view)="viewPage($event)" 
        (edit)="editPage($event)" 
        (delete)="deletePage($event)">
    </app-pages-list>
</ng-container>

<ng-container *ngIf="edit">
    <div class="grid mt-auto mx-0 px-3 surface-200">
        <div class="col text-xl mt-1">{{ 'PAGES.EDIT_PAGE_TITLE' | translate }}: {{ page?.name ? page?.name : 'PAGES.UNTITLED_PAGE' | translate }}</div>
        <div class="col text-right">
            <button type="button" pButton label="{{ 'PAGES.PAGES_LIST_BUTTON' | translate }}" iconPos="left" 
            class="p-button-text p-button-text" (click)="goToList()"><mat-icon class="blue-icon">list</mat-icon></button>
            <p-button label="{{ 'PAGES.SAVE_BUTTON' | translate }}" icon="pi pi-check" iconPos="left" styleClass="p-button-success mr-2 ml-2" 
            (onClick)="savePage()"></p-button>
            <p-splitButton label="{{ 'PAGES.VIEW_PAGE_BUTTON' | translate }}" icon="pi pi-eye" (onClick)="viewPage()" [model]="menuItemsViewButton"></p-splitButton>
        </div>
    </div>

    <app-page-editor *ngIf="page" [page]="page"></app-page-editor>
</ng-container>

<ng-container *ngIf="view">
    <div class="grid mx-0 mt-auto px-3 surface-200">
        <div class="col text-xl mt-1">{{ 'PAGES.VIEW_PAGE_TITLE' | translate }}: {{ page?.name ? page?.name : 'PAGES.UNTITLED_PAGE' | translate }}</div>
        <div class="col text-right justify-content-end flex">
            <button pButton type="button" iconPos="left"  pTooltip="{{ 'PAGES.PAGES_LIST_BUTTON' | translate }}" 
             (click)="goToList()" class="p-button-text p-button-text"><mat-icon class="blue-icon">list</mat-icon>
            </button>
            <button pButton type="button" iconPos="left" class="p-button-text p-button-text"
            pTooltip="{{ 'PAGES.EDIT_BUTTON' | translate }}"(click)="editPage()"><mat-icon class="blue-icon">edit</mat-icon></button>
        </div>
    </div>

    <app-page [configuration]="configuration"></app-page>
</ng-container>

<ng-container *ngIf="slug">
    <app-page [configuration]="configuration"></app-page>
</ng-container>