<os-head-bar prevUrl="../.." [nav]="false" [multiSelectMode]="isMultiSelect">
    <!-- Title -->
    <div class="title-slot" *ngIf="!parentMotion"><h2 translate>Amendments</h2></div>

    <!-- TODO would require translations with parameters -->
    <div class="title-slot" *ngIf="parentMotion">
        <h2>
            {{ 'Amendments to' | translate }}
            {{ (parentMotion | async)?.identifierOrTitle }}
        </h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="amendmentListMenu">
            <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>
</os-head-bar>

<os-list-view-table
    [repo]="motionRepo"
    [sortService]="amendmentSortService"
    [filterService]="amendmentFilterService"
    [columns]="tableColumnDefinition"
    [filterProps]="filterProps"
    [multiSelect]="isMultiSelect"
    [hiddenInMobile]="['summary']"
    listStorageKey="amendments"
    [(selectedRows)]="selectedRows"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Meta -->
    <div *pblNgridCellDef="'meta'; row as motion" class="cell-slot fill">
        <a class="detail-link" [routerLink]="motion.getDetailStateURL()" [state]="{ back: 'true' }"></a>
        <div class="innerTable">
            <!-- Identifier and line -->
            <div class="title-line one-line">
                <span>{{ motion.identifier }}</span>
                <span *ngIf="motion.diffLines && motion.diffLines.length">
                    <span *ngIf="motion.identifier">&nbsp;&middot;&nbsp;</span>
                    <span translate>Line</span>
                    <span>&nbsp;{{ motion.getChangeLines() }}</span>
                </span>
            </div>

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

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

            <!-- State -->
            <div>
                <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
                    {{ motionRepo.getExtendedStateLabel(motion) }}
                </mat-basic-chip>
            </div>

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

    <!-- Summary -->
    <div *pblNgridCellDef="'summary'; row as motion" class="cell-slot fill">
        <a class="detail-link" [routerLink]="motion.getDetailStateURL()"></a>
        <div class="innerTable">
            <div class="motion-text" [innerHtml]="getAmendmentSummary(motion) | trust: 'html'"></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>

<!-- 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>

<mat-menu #amendmentListMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <div *osPerms="'motions.can_manage'">
            <button mat-menu-item (click)="toggleMultiSelect()">
                <mat-icon>library_add</mat-icon>
                <span translate>Multiselect</span>
            </button>
        </div>
        <button mat-menu-item (click)="openExportDialog()">
            <mat-icon>archive</mat-icon>
            <span translate>Export</span>
        </button>
        <button mat-menu-item (click)="exportAmendmentListPdf()">
            <mat-icon>picture_as_pdf</mat-icon>
            <span translate>Amendment list (PDF)</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 *osPerms="'motions.can_manage'; or: 'motions.can_manage_metadata'">
            <mat-divider></mat-divider>
            <os-motion-multiselect-actions [selectedMotions]="selectedRows" (action)="multiselectWrapper($event)">
            </os-motion-multiselect-actions>
        </ng-container>
    </div>
</mat-menu>
