<os-head-bar prevUrl="../.." [nav]="false" [hasMainButton]="canEdit" (mainEvent)="onPlusButton()">
    <!-- Title -->
    <div class="title-slot"><h2 translate>Motion blocks</h2></div>
</os-head-bar>

<os-list-view-table
    class="block-list"
    [repo]="repo"
    [vScrollFixed]="64"
    [showFilterBar]="true"
    [columns]="tableColumnDefinition"
    [sortService]="sortService"
    [multiSelect]="isMultiSelect"
    listStorageKey="motionBlock"
    [(selectedRows)]="selectedRows"
    [filterProps]="filterProps"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Title column -->
    <div *pblNgridCellDef="'title'; value as title; row as block; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="block.id" *ngIf="!isMultiSelect"></a>
        <div class="innerTable">
            <os-icon-container
                [noWrap]="true"
                [icon]="block.internal ? 'lock' : null"
                size="large"
                [matTooltip]="Internal"
            >
                <div class="ellipsis-overflow">
                    {{ title }}
                </div>
            </os-icon-container>
        </div>
    </div>

    <!-- Amount -->
    <div *pblNgridCellDef="'amount'; row as block" class="cell-slot fill">
        <span class="os-amount-chip" matTooltip="{{ 'Motions' | translate }}">{{ block.motions.length }}</span>
    </div>

    <!-- Menu -->
    <div *pblNgridCellDef="'menu'; row as block" class="cell-slot fill">
        <button
            mat-icon-button
            [disabled]="isMultiSelect"
            [matMenuTriggerFor]="singleItemMenu"
            (click)="$event.stopPropagation()"
            [matMenuTriggerData]="{ block: block }"
        >
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-list-view-table>

<!-- Menu for mobile entries -->
<mat-menu #singleItemMenu="matMenu">
    <ng-template matMenuContent let-block="block">
        <os-projector-button [object]="block" [menuItem]="true"></os-projector-button>
        <os-speaker-button [object]="block" [menuItem]="true"></os-speaker-button>
    </ng-template>
</mat-menu>

<!-- Template for new motion block dialog -->
<ng-template #newMotionBlockDialog>
    <h1 mat-dialog-title>
        <span translate>New motion block</span>
    </h1>
    <form [formGroup]="createBlockForm" (keydown)="onKeyDown($event)">
        <div mat-dialog-content>
            <!-- Title -->
            <mat-form-field>
                <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
                <mat-error *ngIf="createBlockForm.get('title').hasError('required')" translate>
                    A title is required
                </mat-error>
            </mat-form-field>

            <!-- Internal -->
            <p>
                <mat-checkbox formControlName="internal"><span translate>Internal</span></mat-checkbox>
            </p>

            <os-agenda-content-object-form [form]="createBlockForm"></os-agenda-content-object-form>
        </div>
    </form>
    <div mat-dialog-actions>
        <button mat-button [disabled]="!createBlockForm.valid" [mat-dialog-close]="true">
            <span translate>Save</span>
        </button>
        <button mat-button [mat-dialog-close]="false"><span translate>Cancel</span></button>
    </div>
</ng-template>
