<os-head-bar prevUrl="../.." [nav]="false" [hasMainButton]="true" (mainEvent)="openDialog()">
    <!-- Title -->
    <div class="title-slot">
        <h2 translate>Comment fields</h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="commentListMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<div class="head-spacer"></div>
<mat-accordion class="os-card">
    <mat-expansion-panel *ngFor="let section of this.commentSections" multiple="false">
        <mat-expansion-panel-header>
            <mat-panel-title>
                <div class="header-container">
                    <div class="name">
                        {{ section.name }}
                    </div>
                    <div class="read">
                        <os-icon-container icon="visibility">
                            {{ section.read_groups }}
                            <ng-container *ngIf="section.read_groups.length === 0">
                                &ndash;
                            </ng-container>
                        </os-icon-container>
                    </div>
                    <div class="write">
                        <os-icon-container icon="edit">
                            {{ section.write_groups }}
                            <ng-container *ngIf="section.write_groups.length === 0">
                                &ndash;
                            </ng-container>
                        </os-icon-container>
                    </div>
                </div>
            </mat-panel-title>
        </mat-expansion-panel-header>
        <h3 translate>Name</h3>
        <div class="spacer-left">{{ section.name }}</div>
        <h3 translate>Groups with read permissions</h3>
        <ul *ngFor="let group of section.read_groups">
            <li>{{ group.getTitle() }}</li>
        </ul>
        <div class="spacer-left" *ngIf="section.read_groups.length === 0" translate>No groups selected</div>
        <h3 translate>Groups with write permissions</h3>
        <ul *ngFor="let group of section.write_groups">
            <li>{{ group.getTitle() }}</li>
        </ul>
        <div class="spacer-left" *ngIf="section.write_groups.length === 0" translate>No groups selected</div>
        <mat-action-row>
            <button mat-button (click)="openDialog(section)" mat-icon-button>
                <mat-icon>edit</mat-icon>
            </button>
            <button mat-button (click)="onDeleteButton(section)" mat-icon-button>
                <mat-icon>delete</mat-icon>
            </button>
        </mat-action-row>
    </mat-expansion-panel>
</mat-accordion>

<mat-menu #commentListMenu="matMenu">
    <button mat-menu-item routerLink="sort">
        <mat-icon>sort</mat-icon>
        <span translate>Sort</span>
    </button>
</mat-menu>

<!-- Template for motion comment dialog -->
<ng-template #motionCommentDialog>
    <h1 mat-dialog-title>
        <span *ngIf="currentComment" translate>Edit comment field</span>
        <span *ngIf="!currentComment" translate>New comment field</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form [formGroup]="commentFieldForm" (keydown)="onKeyDown($event)">
            <p>
                <mat-form-field>
                    <input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
                    <mat-error *ngIf="!commentFieldForm.controls.name.valid">
                        <span translate>Required</span>
                    </mat-error>
                </mat-form-field>
            </p>
            <p>
                <os-search-value-selector
                    ngDefaultControl
                    [formControl]="commentFieldForm.get('read_groups_id')"
                    [multiple]="true"
                    listname="Groups with read permissions"
                    [inputListValues]="groups"
                ></os-search-value-selector>
            </p>
            <p>
                <os-search-value-selector
                    ngDefaultControl
                    [formControl]="commentFieldForm.get('write_groups_id')"
                    [multiple]="true"
                    listname="Groups with write permissions"
                    [inputListValues]="groups"
                ></os-search-value-selector>
            </p>
        </form>
    </div>
    <div mat-dialog-actions>
        <button [disabled]="commentFieldForm.invalid" mat-button [mat-dialog-close]="true">
            <span translate>Save</span>
        </button>
        <button mat-button [mat-dialog-close]="false">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
