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

    <!-- Menu -->
    <div class="menu-slot" *osPerms="'motions.can_manage'">
        <button type="button" mat-icon-button [matMenuTriggerFor]="categoryMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<os-list-view-table
    [repo]="repo"
    [vScrollFixed]="64"
    [allowProjector]="false"
    [showListOfSpeakers]="false"
    [columns]="tableColumnDefinition"
    [filterProps]="filterProps"
    listStorageKey="category"
    [hiddenInMobile]="['menu']"
    (dataSourceChange)="onDataSourceChange($event)"
>
    <!-- Title -->
    <div *pblNgridCellDef="'title'; row as category; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="category.id"></a>
        <div [style.margin-left]="getMargin(category)">{{ category.prefixedName }}</div>
    </div>

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

<mat-menu #categoryMenu="matMenu">
    <button mat-menu-item [routerLink]="'./sort'">
        <mat-icon>sort</mat-icon>
        <span translate>Sort categories</span>
    </button>
</mat-menu>

<!-- Template for new motion block dialog -->
<ng-template #newCategoryDialog>
    <h1 mat-dialog-title>
        <span translate>New category</span>
    </h1>
    <div class="os-form-card-mobile" mat-dialog-content>
        <form [formGroup]="createForm" (keydown)="onKeyDown($event)">
            <!-- Prefix -->
            <p>
                <mat-form-field>
                    <input formControlName="prefix" matInput placeholder="{{ 'Prefix' | translate }}" />
                </mat-form-field>
            </p>

            <!-- Name -->
            <p>
                <mat-form-field>
                    <input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
                    <mat-error *ngIf="!createForm.controls.name.valid" translate>
                        A name is required
                    </mat-error>
                </mat-form-field>
            </p>
        </form>
    </div>
    <div mat-dialog-actions>
        <button mat-button [disabled]="!createForm.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>
