<os-head-bar [hasMainButton]="true" [nav]="false" (mainEvent)="setEditMode(!editGroup)">
    <!-- Title -->
    <div class="title-slot">
        <h2 translate>Groups</h2>
    </div>
</os-head-bar>

<div class="hint-text">
    <span translate>All your changes are saved immediately.</span>
</div>

<mat-accordion *ngFor="let app of appPermissions">
    <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{ app.name | translate }}
            </mat-panel-title>
        </mat-expansion-panel-header>

        <div class="scrollable-perm-matrix">
            <table mat-table [dataSource]="getTableDataSource(app.permissions)">
                <ng-container matColumnDef="perm" sticky>
                    <mat-header-cell *matHeaderCellDef translate>Permissions</mat-header-cell>
                    <mat-cell *matCellDef="let perm">
                        {{ perm.display_name | translate }}
                    </mat-cell>
                </ng-container>

                <div *ngFor="let group of groups; trackBy: trackByIndex">
                    <ng-container [matColumnDef]="group.name">
                        <mat-header-cell class="group-head-table-cell" *matHeaderCellDef (click)="selectGroup(group)">
                            <div class="inner-table">
                                {{ group.name | translate }}
                            </div>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let perm">
                            <div class="inner-table">
                                <mat-checkbox
                                    *ngIf="group.id !== 2"
                                    [checked]="group.hasPermission(perm.value)"
                                    (change)="togglePerm(group, perm.value)"
                                ></mat-checkbox>
                                <mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
                            </div>
                        </mat-cell>
                    </ng-container>
                </div>

                <mat-header-row *matHeaderRowDef="headerRowDef"></mat-header-row>
                <mat-row *matRowDef="let row; columns: headerRowDef"></mat-row>
            </table>
        </div>
    </mat-expansion-panel>
</mat-accordion>

<ng-template #groupEditDialog>
    <h1 mat-dialog-title>
        <span>{{ 'New group name' | translate }}</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    osAutofocus
                    required
                    formControlName="name"
                    placeholder="{{ 'New group name' | translate }}"
                />
                <mat-error *ngIf="!groupForm.valid" translate>Required</mat-error>
            </mat-form-field>
        </form>
    </div>
    <div mat-dialog-actions>
        <button
            type="submit"
            mat-button
            [disabled]="!groupForm.valid"
            color="primary"
            (click)="saveGroup(groupForm.value)"
        >
            <span translate>Save</span>
        </button>
        <button type="button" mat-button (click)="cancelEditing()">
            <span translate>Cancel</span>
        </button>
        <button *ngIf="selectedGroup" [disabled]="!canDeleteGroup(selectedGroup)" type="button" mat-button color="warn" (click)="deleteSelectedGroup()">
            <span translate>Delete</span>
        </button>
    </div>
</ng-template>
