<os-head-bar [hasMainButton]="perms.isAllowed('create')" (mainEvent)="onPlusButton()" [multiSelectMode]="isMultiSelect">
    <!-- Title -->
    <div class="title-slot"><h2 translate>Motions</h2></div>

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

    <!-- Multiselect info -->
    <div class="central-info-slot">
        <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
        <span>{{ selectedRows.length }}&nbsp;</span><span translate>selected</span>
    </div>

    <div class="extra-controls-slot">
        <div *ngIf="isCategoryAvailable() && !isMultiSelect">
            <button
                mat-button
                *ngIf="selectedView !== 'tiles'"
                (click)="onChangeView('tiles')"
                matTooltip="{{ 'Tile view' | translate }}"
            >
                <mat-icon>view_module</mat-icon>
            </button>

            <button
                mat-button
                *ngIf="selectedView !== 'list'"
                (click)="onChangeView('list')"
                matTooltip="{{ 'List view' | translate }}"
            >
                <mat-icon>view_headline</mat-icon>
            </button>
        </div>
    </div>
</os-head-bar>

<ng-container *ngIf="selectedView === 'tiles'; then tiles; else list"></ng-container>

<ng-template #list>
    <os-list-view-table
        [repo]="motionRepo"
        [filterService]="filterService"
        [sortService]="sortService"
        [columns]="tableColumnDefinition"
        [multiSelect]="isMultiSelect"
        [filterProps]="filterProps"
        [hiddenInMobile]="getColumnsHiddenInMobile()"
        listStorageKey="motion"
        [(selectedRows)]="selectedRows"
        (dataSourceChange)="onDataSourceChange($event)"
    >
        <!-- Identifier -->
        <div *pblNgridCellDef="'identifier'; row as motion" class="cell-slot fill">
            <a class="detail-link" [routerLink]="motion.id" *ngIf="!isMultiSelect"></a>
            <div class="column-identifier innerTable">
                {{ motion.identifier }}
            </div>
        </div>

        <!-- Title -->
        <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill">
            <a class="detail-link" [routerLink]="motion.id" *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="vp.isMobile && 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>

                <!-- TODO: These two now appear twice. Might be an own component -->
                <!-- Workflow state -->
                <div class="ellipsis-overflow white">
                    <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
                        {{ this.motionRepo.getExtendedStateLabel(motion) }}
                    </mat-basic-chip>
                </div>

                <!-- Recommendation -->
                <div
                    *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
                    class="ellipsis-overflow white spacer-top-3"
                >
                    <mat-basic-chip class="bluegrey" [disabled]="true">
                        {{ motionRepo.getExtendedRecommendationLabel(motion) }}
                    </mat-basic-chip>
                </div>
            </div>
        </div>

        <!-- Category, blocks and tags -->
        <div
            *pblNgridCellDef="'state'; row as motion"
            class="cell-slot fill"
            [ngClass]="isMultiSelect ? '' : 'clickable'"
            (click)="openEditInfo(motion)"
        >
            <div class="column-state innerTable">
                <!-- Category -->
                <div class="ellipsis-overflow" *ngIf="motion.category">
                    <os-icon-container icon="category">
                        {{ motion.category.nameWithParentAbove }}
                    </os-icon-container>
                </div>

                <!-- Motion Block -->
                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.motion_block">
                    <os-icon-container icon="widgets">{{ motion.motion_block.title }}</os-icon-container>
                </div>

                <!-- Tags -->
                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.tags && motion.tags.length">
                    <os-icon-container icon="local_offer">
                        <span *ngFor="let tag of motion.tags; let last = last">
                            {{ tag.getTitle() }}
                            <span *ngIf="!last">,&nbsp;</span>
                        </span>
                    </os-icon-container>
                </div>
            </div>
        </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>
</ng-template>

<!-- 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>
    </ng-template>
</mat-menu>

<ng-template #tiles>
    <os-grid-layout>
        <os-block-tile
            *ngFor="let tile of listTiles"
            (clicked)="changeToViewWithTileCategory(tile)"
            [orientation]="'horizontal'"
            [only]="'title'"
            [blockType]="'node'"
            [data]="tile"
            title="{{ tile.name | translate }}"
        >
            <ng-container class="block-node">
                <table
                    matTooltip="{{ tile.amountOfMotions }} {{ 'Motions' | translate }} – {{ tile.name | translate }}"
                >
                    <tbody>
                        <tr>
                            <td>
                                <span
                                    class="tile-block-title"
                                    [matBadge]="tile.amountOfMotions"
                                    [matBadgeColor]="'accent'"
                                    [ngSwitch]="tile.name"
                                >
                                    <span *ngSwitchCase="'Favorites'"><mat-icon>star</mat-icon></span>
                                    <span *ngSwitchCase="'No category'"><mat-icon>block</mat-icon></span>
                                    <span *ngSwitchCase="'Personal notes'"><mat-icon>speaker_notes</mat-icon></span>
                                    <span *ngSwitchDefault>
                                        <span *ngIf="tile.prefix">
                                            {{ tile.prefix }}
                                        </span>
                                        <span *ngIf="!tile.prefix">
                                            <mat-icon>category</mat-icon>
                                        </span>
                                    </span>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ng-container>
        </os-block-tile>
    </os-grid-layout>
</ng-template>

<mat-menu #motionListMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <!-- Multiselect -->
        <div *ngIf="perms.isAllowed('change_metadata') && selectedView === 'list'">
            <button mat-menu-item (click)="toggleMultiSelect()">
                <mat-icon>library_add</mat-icon>
                <span translate>Multiselect</span>
            </button>
            <mat-divider></mat-divider>
        </div>

        <!-- Amendments -->
        <div *ngIf="perms.isAllowed('manage') || hasAmendments()">
            <button mat-menu-item routerLink="amendments">
                <!-- color_lens -->
                <!-- format_paint -->
                <mat-icon>color_lens</mat-icon>
                <span translate>Amendments</span>
            </button>
        </div>

        <!-- Categories -->
        <div *ngIf="perms.isAllowed('manage') || categories.length">
            <button mat-menu-item routerLink="category">
                <mat-icon>category</mat-icon>
                <span translate>Categories</span>
            </button>
        </div>

        <!-- Motion blocks -->
        <div *ngIf="perms.isAllowed('manage') || motionBlocks.length">
            <button mat-menu-item routerLink="blocks">
                <mat-icon>widgets</mat-icon>
                <span translate>Motion blocks</span>
            </button>
        </div>

        <mat-divider
            *ngIf="categories.length || motionBlocks.length || hasAmendments() || perms.isAllowed('manage')"
        ></mat-divider>

        <div *ngIf="perms.isAllowed('manage')">
            <!-- Call list -->
            <button mat-menu-item routerLink="call-list">
                <mat-icon>sort</mat-icon>
                <span translate>Call list</span>
            </button>

            <!-- Statutes -->
            <button mat-menu-item routerLink="statute-paragraphs" *ngIf="statutesEnabled">
                <mat-icon>account_balance</mat-icon>
                <span translate>Statute</span>
            </button>

            <!-- Comments -->
            <button mat-menu-item routerLink="comment-section">
                <mat-icon>speaker_notes</mat-icon>
                <span translate>Comment fields</span>
            </button>

            <!-- Workflows -->
            <button mat-menu-item routerLink="workflow">
                <mat-icon>build</mat-icon>
                <span translate>Workflows</span>
            </button>

            <!-- Tags -->
            <button mat-menu-item routerLink="/tags" *osPerms="'core.can_manage_tags'">
                <mat-icon>local_offer</mat-icon>
                <span translate>Tags</span>
            </button>

            <mat-divider></mat-divider>
        </div>

        <!-- Export -->
        <button mat-menu-item *ngIf="selectedView === 'list'" (click)="openExportDialog()">
            <mat-icon>archive</mat-icon>
            <span translate>Export</span>
        </button>

        <!-- Import -->
        <div *ngIf="perms.isAllowed('manage')">
            <button mat-menu-item routerLink="import">
                <mat-icon>cloud_upload</mat-icon>
                <span translate>Import</span>
            </button>
        </div>

        <mat-divider></mat-divider>

        <!-- Settings -->
        <button mat-menu-item *osPerms="'core.can_manage_config'" routerLink="/settings/motions">
            <mat-icon>settings</mat-icon>
            <span translate>Settings</span>
        </button>
    </div>
    <div *ngIf="isMultiSelect">
        <button mat-menu-item (click)="selectAll()">
            <mat-icon>done_all</mat-icon>
            <span translate>Select all</span>
        </button>
        <button mat-menu-item [disabled]="!selectedRows.length" (click)="deselectAll()">
            <mat-icon>clear</mat-icon>
            <span translate>Deselect all</span>
        </button>
        <ng-container *ngIf="perms.isAllowed('change_metadata')">
            <mat-divider></mat-divider>
            <os-motion-multiselect-actions [selectedMotions]="selectedRows" (action)="multiselectWrapper($event)">
                <button
                    mat-menu-item
                    [disabled]="!selectedRows.length"
                    (click)="multiselectWrapper(multiselectService.moveToItem(selectedRows))"
                >
                    <mat-icon>sort</mat-icon>
                    <span translate>Move to agenda item</span>
                </button>
                <button
                    mat-menu-item
                    [disabled]="!selectedRows.length"
                    (click)="multiselectWrapper(multiselectService.bulkMoveItems(selectedRows))"
                >
                    <mat-icon>format_indent_increase</mat-icon>
                    <span translate>Move in call list</span>
                </button>
            </os-motion-multiselect-actions>
        </ng-container>
    </div>
</mat-menu>

<!-- Template for dialog for quick editing -->
<ng-template #motionInfoDialog>
    <h1 mat-dialog-title>
        <span>{{ 'Edit details for' | translate }} {{ infoDialog.title }}</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <!-- Category -->
        <mat-form-field *ngIf="isCategoryAvailable()">
            <mat-select placeholder="{{ 'Category' | translate }}" [(ngModel)]="infoDialog.category_id">
                <mat-option [value]="null">-</mat-option>
                <mat-option *ngFor="let category of categories" [value]="category.id">
                    {{ category.getTitle() | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <!-- Motion block -->
        <mat-form-field *ngIf="isMotionBlockAvailable()">
            <mat-select placeholder="{{ 'Motion block' | translate }}" [(ngModel)]="infoDialog.motion_block_id">
                <mat-option [value]="null">-</mat-option>
                <mat-option *ngFor="let block of motionBlocks" [value]="block.id">
                    {{ block.getTitle() | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <!-- Tag -->
        <mat-form-field *ngIf="isTagAvailable()">
            <mat-select multiple placeholder="{{ 'Tags' | translate }}" [(ngModel)]="infoDialog.tags_id">
                <mat-option *ngFor="let tag of tags" [value]="tag.id">
                    {{ tag.getTitle() | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <!-- State -->
        <mat-form-field *ngIf="perms.isAllowed('change_state', selectedMotion)">
            <mat-select placeholder="{{ 'State' | translate }}" [(ngModel)]="infoDialog.state_id">
                <mat-option *ngFor="let state of selectedMotion.state.next_states" [value]="state.id">
                    {{ state.getTitle() | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <!-- Recommendation -->
        <mat-form-field *ngIf="perms.isAllowed('change_state', selectedMotion)">
            <mat-select placeholder="{{ 'Recommendation' | translate }}" [(ngModel)]="infoDialog.recommendation_id">
                <mat-option *ngFor="let state of selectedMotion.possibleRecommendations" [value]="state.id">
                    {{ state.recommendation_label | translate }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div mat-dialog-actions>
        <button type="submit" mat-button color="primary" [mat-dialog-close]="infoDialog">
            <span translate>Save</span>
        </button>
        <button type="button" mat-button [mat-dialog-close]="null">
            <span translate>Cancel</span>
        </button>
    </div>
</ng-template>
