<os-head-bar [nav]="false" [hasMainButton]="true" (mainEvent)="onNewStateButton()">
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="workflow">
            {{ workflow.name | translate }}
        </h2>
    </div>

    <!-- Edit button -->
    <div class="extra-controls-slot">
        <button mat-icon-button (click)="onEditWorkflowButton()">
            <mat-icon>edit</mat-icon>
        </button>
    </div>
</os-head-bar>

<!-- Detail -->
<div *ngIf="workflow">
    <div class="title-line">
        <strong>
            <span translate>First state</span>:
            <span>{{ workflow.first_state.name | translate }}</span>
        </strong>
    </div>

    <div class="scrollable-matrix">
        <table mat-table [dataSource]="getTableDataSource()">
            <ng-container matColumnDef="perm" sticky>
                <th mat-header-cell class="group-head-table-cell" *matHeaderCellDef translate>Permissions</th>
                <td mat-cell *matCellDef="let perm">
                    <div class="permission-name">
                        {{ perm.name | translate }}
                    </div>
                </td>
            </ng-container>

            <ng-container [matColumnDef]="getColumnDef(state)" *ngFor="let state of workflow.states; trackBy: trackByIndex">
                <th mat-header-cell *matHeaderCellDef (click)="onClickStateName(state)">
                    <div class="clickable-cell stretch-to-fill-parent">
                        <div class="inner-table">
                            {{ state.name | translate }}
                        </div>
                    </div>
                </th>
                <td mat-cell *matCellDef="let perm">
                    <div class="inner-table" *ngIf="perm.type === 'check'">
                        <mat-checkbox
                            [checked]="state[perm.selector]"
                            (change)="onToggleStatePerm(state, perm.selector, $event)"
                        ></mat-checkbox>
                    </div>
                    <div
                        *ngIf="perm.type === 'input'"
                    >
                        <div class="inner-table">
                            {{ (state[perm.selector] | translate) || '–' }}
                        </div>
                        <div
                            class="clickable-cell stretch-to-fill-parent"
                            (click)="onClickInputPerm(perm, state)"
                            ></div>
                    </div>
                    <div class="inner-table" *ngIf="perm.type === 'color'">
                        <mat-basic-chip
                            [matMenuTriggerFor]="colorMenu"
                            [matMenuTriggerData]="{ state: state }"
                            [disableRipple]="true"
                            [ngClass]="state[perm.selector]"
                        >
                            {{ state[perm.selector] | translate }}
                        </mat-basic-chip>
                    </div>
                    <div *ngIf="perm.type === 'state'">
                        <div class="inner-table">
                            <div *ngIf="!state.next_states.length">
                                -
                            </div>
                            <div *ngIf="state.next_states.length">
                                <div *ngFor="let nextstate of state.next_states; let last = last">
                                    {{ nextstate.name | translate }}<span *ngIf="!last">,&nbsp;</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="clickable-cell stretch-to-fill-parent"
                            [matMenuTriggerFor]="nextStatesMenu"
                            [matMenuTriggerData]="{ state: state }"
                        ></div>
                    </div>
                    <div *ngIf="perm.type === 'amendment'">
                        <div class="inner-table">
                            {{ getMergeAmendmentLabel(state.merge_amendment_into_final) | translate }}
                        </div>
                        <div
                            class="clickable-cell stretch-to-fill-parent"
                            [matMenuTriggerFor]="mergeAmendmentMenu"
                            [matMenuTriggerData]="{ state: state }"
                        ></div>
                    </div>
                    <div *ngIf="perm.type === 'restriction'">
                        <div class="inner-table">
                            <div *ngIf="!state.restriction.length">
                                -
                            </div>
                            <div *ngIf="state.restriction.length">
                                <div *ngFor="let restriction of state.restriction; let last = last">
                                    {{ getRestrictionLabel(restriction) | translate
                                    }}<span *ngIf="!last">,&nbsp;</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="clickable-cell stretch-to-fill-parent"
                            [matMenuTriggerFor]="restrictionMenu"
                            [matMenuTriggerData]="{ state: state }"
                        ></div>
                    </div>
                </td>
            </ng-container>

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

<!-- New state dialog -->
<ng-template #workflowDialog>
    <h1 mat-dialog-title>
        <span>{{ dialogData.title | translate }}</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <p>{{ dialogData.description | translate }}</p>
        <mat-form-field>
            <input matInput osAutofocus [(ngModel)]="dialogData.value" />
        </mat-form-field>
    </div>
    <div mat-dialog-actions>
        <button
            type="submit"
            [disabled]="dialogData.value === ''"
            mat-button
            color="primary"
            [mat-dialog-close]="{ action: 'update', value: dialogData.value }"
        >
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
        <button
            type="button"
            mat-button
            color="warn"
            *ngIf="dialogData.deletable"
            [mat-dialog-close]="{ action: 'delete' }"
        >
            <span translate>Delete</span>
        </button>
    </div>
</ng-template>

<!-- select color menu -->
<mat-menu matMenuContent #colorMenu="matMenu">
    <ng-template let-state="state" matMenuContent>
        <button mat-menu-item *ngFor="let color of labelColors" (click)="onSelectColor(state, color)">
            <mat-icon *ngIf="color === state.css_class">check</mat-icon>
            <span>{{ color | translate }}</span>
        </button>
    </ng-template>
</mat-menu>

<!-- select next states menu -->
<mat-menu matMenuContent #nextStatesMenu="matMenu">
    <ng-template let-state="state" matMenuContent>
        <div *ngFor="let nextState of workflow.states">
            <button mat-menu-item *ngIf="nextState.name !== state.name" (click)="onSetNextState(nextState, state)">
                <mat-icon *ngIf="state.next_states_id.includes(nextState.id)">check</mat-icon>
                <span>{{ nextState.name | translate }}</span>
            </button>
        </div>
    </ng-template>
</mat-menu>

<!-- Select restriction menu -->
<mat-menu matMenuContent #restrictionMenu="matMenu">
    <ng-template let-state="state" matMenuContent>
        <button
            mat-menu-item
            *ngFor="let restriction of restrictions"
            (click)="onSetRestriction(restriction.key, state)"
        >
            <mat-icon *ngIf="state.restriction.includes(restriction.key)">check</mat-icon>
            <span>{{ restriction.label | translate }}</span>
        </button>
    </ng-template>
</mat-menu>

<!-- Select merge amendment menu -->
<mat-menu matMenuContent #mergeAmendmentMenu="matMenu">
    <ng-template let-state="state" matMenuContent>
        <div *ngFor="let amendment of amendmentIntoFinal">
            <button mat-menu-item (click)="setMergeAmendment(amendment.merge, state)">
                <mat-icon *ngIf="amendment.merge === state.merge_amendment_into_final">check</mat-icon>
                <span>{{ amendment.label | translate }}</span>
            </button>
        </div>
    </ng-template>
</mat-menu>
