<os-head-bar [nav]="false">
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="block">
            <mat-icon *ngIf="block.internal">lock</mat-icon>
            {{ block.title }}
        </h2>
    </div>

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

    <!-- Extra Controls -->
    <div class="extra-controls-slot" *ngIf="!vp.isMobile">
        <button
            *osPerms="['motions.can_manage', 'motions.can_manage_metadata']"
            mat-button
            (click)="onFollowRecButton()"
            [disabled]="isFollowingProhibited()"
        >
            <os-icon-container icon="done_all">
                <span translate>Follow recommendations for all motions</span>
            </os-icon-container>
        </button>
    </div>
</os-head-bar>

<os-list-view-table
    [repo]="motionRepo"
    [filterService]="filterService"
    [columns]="tableColumnDefinition"
    [restricted]="restrictedColumns"
    [filterProps]="filterProps"
    [hiddenInMobile]="['remove']"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Title column -->
    <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill">
        <a
            class="detail-link"
            [routerLink]="motion.getDetailStateURL()"
            [state]="{ back: 'true' }"
            *ngIf="!isMultiSelect"
        ></a>
        <div class="column-title innerTable">
            <div class="title-line ellipsis-overflow">
                <!-- Is Favorite -->
                <span *ngIf="motion.star" class="favorite-star">
                    <mat-icon inline>star</mat-icon>
                </span>

                <!-- Has File -->
                <span class="attached-files" *ngIf="motion.hasAttachments()">
                    <mat-icon>attach_file</mat-icon>
                </span>

                <!-- The title -->
                <span>
                    <span *ngIf="motion.identifier">
                        {{ motion.identifier }}
                        <span>&middot;</span>
                    </span>
                    {{ motion.title }}
                </span>
            </div>

            <!-- Submitters -->
            <div class="submitters-line ellipsis-overflow">
                <span *ngIf="motion.submitters.length">
                    <span translate>by</span>
                    {{ motion.submitters }}
                </span>

                <span *ngIf="showSequential">
                    <span *ngIf="motion.submitters.length">
                        &middot;
                    </span>
                    <span translate>Sequential number</span>
                    {{ motion.id }}
                </span>
            </div>

            <!-- Workflow state -->
            <div class="ellipsis-overflow white">
                <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
                    {{ getStateLabel(motion) }}
                </mat-basic-chip>
            </div>
        </div>
    </div>

    <!-- Recommendation column -->
    <div *pblNgridCellDef="'recommendation'; row as motion" class="cell-slot fill">
        <mat-basic-chip *ngIf="!!motion.recommendation" disableRipple class="bluegrey">
            {{ getRecommendationLabel(motion) }}
        </mat-basic-chip>
    </div>

    <!-- Remove from block column -->
    <div *pblNgridCellDef="'remove'; row as motion" class="cell-slot fill">
        <button
            type="button"
            mat-icon-button
            color="warn"
            matTooltip="{{ 'Remove from motion block' | translate }}"
            (click)="onRemoveMotionButton(motion)"
        >
            <mat-icon>close</mat-icon>
        </button>
    </div>

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

<!-- Menu for mobile entries -->
<mat-menu #singleItemMenu="matMenu">
    <ng-template matMenuContent let-motion="motion">
        <os-projector-button [object]="motion" [menuItem]="true"></os-projector-button>
        <os-speaker-button [object]="motion" [menuItem]="true"></os-speaker-button>
        <button mat-menu-item class="red-warning-text" (click)="onRemoveMotionButton(motion)">
            <mat-icon>close</mat-icon>
            <span translate>Remove from motion block</span>
        </button>
    </ng-template>
</mat-menu>

<!-- The menu content -->
<mat-menu #motionBlockMenu="matMenu">
    <div *ngIf="vp.isMobile">
        <button
            *osPerms="['motions.can_manage', 'motions.can_manage_metadata']"
            mat-menu-item
            (click)="onFollowRecButton()"
            [disabled]="isFollowingProhibited()"
        >
            <mat-icon>done_all</mat-icon>
            <span translate>Follow recommendations for all motions</span>
        </button>
    </div>

    <os-speaker-button [menuItem]="true" [object]="block"></os-speaker-button>

    <os-projector-button *ngIf="block" [object]="block" [menuItem]="true"></os-projector-button>

    <div *osPerms="'agenda.can_manage'">
        <button mat-menu-item (click)="addToAgenda()" *ngIf="block && !block.item">
            <mat-icon>add</mat-icon>
            <span translate>Add to agenda</span>
        </button>
        <button mat-menu-item (click)="removeFromAgenda()" *ngIf="block && block.item">
            <mat-icon>remove</mat-icon>
            <span translate>Remove from agenda</span>
        </button>
    </div>

    <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
        <button mat-menu-item (click)="toggleEditMode()">
            <mat-icon>edit</mat-icon>
            <span translate>Edit</span>
        </button>
        <mat-divider></mat-divider>

        <button mat-menu-item class="red-warning-text" (click)="onDeleteBlockButton()">
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </div>
</mat-menu>

<ng-template #editDialog>
    <h1 mat-dialog-title>
        <span>{{ 'Edit details for' | translate }} {{ block.title }}</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form class="edit-form" [formGroup]="blockEditForm" (ngSubmit)="saveBlock()" (keydown)="onKeyDown($event)">
            <mat-form-field>
                <input matInput osAutofocus placeholder="{{ 'Title' | translate }}" formControlName="title" required />
            </mat-form-field>
            <mat-checkbox formControlName="internal">Internal</mat-checkbox>
        </form>
    </div>
    <div mat-dialog-actions>
        <button type="submit" mat-button [disabled]="!blockEditForm.valid" color="primary" (click)="saveBlock()">
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
