<div class="inner">
    <div class="title" trans>Menu Items</div>

    <div class="no-menu-items" *ngIf="!menus.activeMenu.items.length" trans>This menu has no items yet.</div>

    <mat-accordion cdkDropList (cdkDropListDropped)="reorderMenuItems($event)">
        <mat-expansion-panel
                class="mat-elevation-z menu-item-container"
                cdkDrag
                *ngFor="let menuItem of menus.activeMenu.items"
                (opened)="toggleMenuItem(menuItem)"
                (closed)="toggleMenuItem(menuItem)"
                [attr.data-id]="menuItem.id"
        >
            <mat-expansion-panel-header>
                <mat-panel-title>
                    <button class="no-style drag-handle" cdkDragHandle><mat-icon svgIcon="drag-handle"></mat-icon></button>
                    <span class="name">{{menuItem.label}}</span>
                </mat-panel-title>
            </mat-expansion-panel-header>

            <div class="many-inputs">
                <div class="input-container">
                    <label for="{{menuItem.id + '-label'}}" trans>Label</label>
                    <input type="text" [(ngModel)]="menuItem.label" id="{{menuItem.id + '-label'}}" (ngModelChange)="menus.commitChanges()">
                </div>

                <div class="input-container">
                    <label for="{{menuItem.id + '-type'}}" trans>Type</label>
                    <select [(ngModel)]="menuItem.type" id="{{menuItem.id + '-type'}}" (ngModelChange)="menus.commitChanges()">
                        <option value="link" trans>Link</option>
                        <option value="route" trans>Route</option>
                        <option value="page" trans>Page</option>
                    </select>
                </div>

                <div class="input-container">
                    <label for="{{menuItem.id + '-action'}}" trans>Action</label>
                    <input type="text" [(ngModel)]="menuItem.action" id="{{menuItem.id + '-action'}}" (ngModelChange)="menus.commitChanges()">
                </div>

                <div class="input-container">
                    <label for="{{menuItem.id + '-condition'}}" trans>Condition</label>
                    <select [(ngModel)]="menuItem.condition" id="{{menuItem.id + '-condition'}}" (ngModelChange)="menus.commitChanges()">
                        <option [ngValue]="null" trans>None</option>
                        <option value="auth" trans>Show to Logged in Users Only</option>
                        <option value="guest" trans>Show to Guest Users Only</option>
                        <option value="admin" trans>Show to Admin Only</option>
                    </select>
                </div>

                <div class="input-container icon-input-container" #iconInput (click)="openIconSelector(iconInput, menuItem)">
                    <label for="{{menuItem.id + '-icon'}}" trans>Icon</label>
                    <input type="text" readonly [(ngModel)]="menuItem.icon" id="{{menuItem.id + '-icon'}}">
                    <mat-icon [svgIcon]="menuItem.icon"></mat-icon>
                </div>
            </div>

            <mat-action-row>
                <button mat-button color="warn" class="delete-button" (click)="confirmMenuItemDeletion()" trans>Remove</button>
            </mat-action-row>
        </mat-expansion-panel>
    </mat-accordion>
</div>