<os-head-bar prevUrl="../.." [nav]="false" [editMode]="hasChanged" (mainEvent)="onCancel()" (saveEvent)="onSave()">
    <!-- Title -->
    <div class="title-slot">
        <h2 translate>Call list</h2>
    </div>

    <!-- Export menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="mainMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<div class="custom-table-header flex-spaced">
    <div class="filter-count">
        <span> {{ seenNodes[0] }}&nbsp;</span><span translate>of</span>
        <span>&nbsp;{{ seenNodes[1] }}</span>
    </div>
    <div class="current-filters" *ngIf="hasActiveFilter">
        <div><span translate>Active filters</span>:&nbsp;</div>
        <div>
            <button mat-button (click)="resetFilters()">
                <mat-icon inline>cancel</mat-icon>
                <span translate>Clear all</span>
            </button>
        </div>
    </div>
    <div class="flex-spaced margin-right-5">
        <div *ngIf="categoryFilterOptions.length">
            <button mat-button [matMenuTriggerFor]="catFilterMenu">
                <span
                    class="upper"
                    [matBadge]="activeCatFilterCount > 0 ? activeCatFilterCount : null"
                    matBadgeColor="accent"
                    [matBadgeOverlap]="false"
                    translate
                >
                    Categories
                </span>
            </button>
        </div>
        <div *ngIf="tagFilterOptions.length">
            <button mat-button [matMenuTriggerFor]="tagFilterMenu">
                <span
                    class="upper"
                    [matBadge]="activeTagFilterCount > 0 ? activeTagFilterCount : null"
                    matBadgeColor="accent"
                    [matBadgeOverlap]="false"
                    translate
                >
                    Tags
                </span>
            </button>
        </div>
    </div>
</div>

<mat-menu #catFilterMenu="matMenu">
    <div *ngFor="let catOption of categoryFilterOptions">
        <button mat-menu-item (click)="onFilterChange('category', catOption.id)">
            <mat-icon *ngIf="catOption.state">checked</mat-icon>
            <span>{{ catOption.label }}</span>
        </button>
    </div>
</mat-menu>
<mat-menu #tagFilterMenu="matMenu">
    <div *ngFor="let tagOption of tagFilterOptions">
        <button mat-menu-item (click)="onFilterChange('tag', tagOption.id)">
            <mat-icon *ngIf="tagOption.state">checked</mat-icon>
            <span>{{ tagOption.label }}</span>
        </button>
    </div>
</mat-menu>

<mat-card>
    <os-sorting-tree
        #osSortedTree
        parentKey="sort_parent_id"
        weightKey="weight"
        (visibleNodes)="onChangeAmountOfItems($event)"
        (hasChanged)="receiveChanges($event)"
        [model]="motionsObservable"
        [filterChange]="changeFilter"
        [sortingDefinition]="forceSort"
    >
        <ng-template #innerNode let-item="item">
            <div class="line">
                <div class="left">
                    {{ item.getTitle() }}
                </div>
                <div class="right">
                    <span *ngFor="let tag of getTags(item)">
                        <mat-icon inline>local_offer</mat-icon>
                        {{ tag.getTitle() }}
                    </span>
                </div>
            </div>
        </ng-template>
    </os-sorting-tree>
</mat-card>

<mat-menu #mainMenu="matMenu">
    <button mat-menu-item (click)="sortMotionsByIdentifier()">
        <mat-icon>sort</mat-icon>
        <span translate>Sort by identifier</span>
    </button>

    <mat-divider></mat-divider>

    <button mat-menu-item (click)="pdfExportCallList()">
        <mat-icon>picture_as_pdf</mat-icon>
        <span translate>Export as PDF</span>
    </button>

    <button mat-menu-item (click)="csvExportCallList()">
        <mat-icon>archive</mat-icon>
        <span translate>Export as CSV</span>
    </button>
</mat-menu>
