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

    <!-- Use the menu slot for an add button -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="commentMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
    <mat-accordion class="os-card">
        <mat-expansion-panel
            *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
            multiple="false"
        >
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ statuteParagraph.title }}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-card>
                <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
                <mat-card-content>
                    <div [innerHTML]="statuteParagraph.text | trust: 'html'"></div>
                </mat-card-content>
            </mat-card>
            <mat-action-row>
                <button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
                    <mat-icon>delete</mat-icon>
                </button>
            </mat-action-row>
        </mat-expansion-panel>
    </mat-accordion>
</cdk-virtual-scroll-viewport>

<mat-card *ngIf="statuteParagraphs.length === 0">
    <mat-card-content>
        <div class="no-content" translate>No statute paragraphs</div>
    </mat-card-content>
</mat-card>

<mat-menu #commentMenu="matMenu">
    <button mat-menu-item (click)="onCsvExport()">
        <mat-icon>archive</mat-icon>
        <span translate>Export as CSV</span>
    </button>
    <button mat-menu-item *osPerms="'motions.can_manage'" routerLink="import">
        <mat-icon>cloud_upload</mat-icon>
        <span translate>Import</span>
    </button>
</mat-menu>

<!-- Template for statute paragraph dialog -->
<ng-template #statuteParagraphDialog>
    <h1 mat-dialog-title>
        <span *ngIf="currentStatuteParagraph" translate>Edit statute paragraph</span>
        <span *ngIf="!currentStatuteParagraph" translate>New statute paragraph</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form [formGroup]="statuteParagraphForm" (keydown)="onKeyDown($event)">
            <p>
                <mat-form-field>
                    <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
                    <mat-hint *ngIf="!statuteParagraphForm.controls.title.valid">
                        <span translate>Required</span>
                    </mat-hint>
                </mat-form-field>
            </p>
            <span>
                <!-- The HTML Editor -->
                <h4 translate>Statute paragraph</h4>
                <editor formControlName="text" [init]="tinyMceSettings"></editor>
            </span>
        </form>
    </div>
    <div mat-dialog-actions>
        <button mat-button [mat-dialog-close]="true" [disabled]="!statuteParagraphForm.valid">
            <span translate>Save</span>
        </button>
        <button mat-button [mat-dialog-close]="false">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
