<os-head-bar
    [hasMainButton]="hasPerms('manage')"
    mainButtonIcon="edit"
    [nav]="false"
    [editMode]="editAssignment"
    [isSaveButtonEnabled]="assignmentForm.valid"
    (mainEvent)="setEditMode(!editAssignment)"
    (saveEvent)="saveAssignment()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="!newAssignment" translate>Election</h2>
        <h2 *ngIf="newAssignment" translate>New election</h2>
    </div>

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

    <mat-menu #assignmentDetailMenu="matMenu">
        <div *ngIf="assignment">
            <!-- PDF -->
            <button mat-menu-item (click)="onDownloadPdf()">
                <!-- TODO: results or description. Results if published -->
                <mat-icon>picture_as_pdf</mat-icon>
                <span translate>PDF</span>
            </button>
            <!-- List of speakers -->
            <os-speaker-button [object]="assignment" [menuItem]="true"></os-speaker-button>
        </div>
        <!-- Project -->
        <os-projector-button [object]="assignment" [menuItem]="true"></os-projector-button>

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

        <!-- Delete -->
        <div *ngIf="assignment && hasPerms('manage')">
            <!-- Delete -->
            <mat-divider></mat-divider>
            <button mat-menu-item class="red-warning-text" (click)="onDeleteAssignmentButton()">
                <mat-icon>delete</mat-icon>
                <span translate>Delete</span>
            </button>
        </div>
    </mat-menu>
</os-head-bar>

<div class="content-container">
    <div *ngIf="editAssignment">
        <ng-container [ngTemplateOutlet]="assignmentFormTemplate"></ng-container>
    </div>
    <div *ngIf="!editAssignment">
        <ng-container [ngTemplateOutlet]="metaInfoTemplate"></ng-container>
        <ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
    </div>
</div>

<ng-template #metaInfoTemplate>
    <mat-card class="os-card" *ngIf="assignment">
        <div *ngIf="!editAssignment && assignment.getTitle">
            <h1>{{ assignment.getTitle() }}</h1>
        </div>
        <div *ngIf="assignment">
            <div
                *ngIf="assignment.assignment.description"
                [innerHTML]="assignment.assignment.description | trust: 'html'"
            ></div>
        </div>
        <div class="meta-info-grid">
            <div class="number-of-elected">
                <h4 translate>Number of persons to be elected</h4>
                <span>{{ assignment.assignment.open_posts }}</span>
            </div>
            <div class="current-phase">
                <h4 translate>Phase</h4>
                <mat-basic-chip
                    *ngIf="hasPerms('manage')"
                    [matMenuTriggerFor]="phaseMenu"
                    class="bluegrey"
                    disableRipple
                >
                    {{ assignment.phaseString | translate }}
                </mat-basic-chip>
                <mat-basic-chip *ngIf="!hasPerms('manage')" class="bluegrey" disableRipple>
                    {{ assignment.phaseString | translate }}
                </mat-basic-chip>
                <mat-menu #phaseMenu="matMenu">
                    <button *ngFor="let option of phaseOptions" mat-menu-item (click)="onSetPhaseButton(option.value)">
                        {{ option.display_name | translate }}
                    </button>
                </mat-menu>
            </div>
        </div>

        <div *ngIf="assignment.attachments.length">
            <h4 translate>Election documents</h4>
            <mat-list dense class="election-document-list">
                <mat-list-item *ngFor="let file of assignment.attachments">
                    <a [routerLink]="file.url" target="_blank">{{ file.getTitle() }}</a>
                </mat-list-item>
            </mat-list>
        </div>
    </mat-card>
</ng-template>

<ng-template #contentTemplate>
    <mat-card class="os-card">
        <ng-container *ngIf="assignment && !assignment.isFinished" [ngTemplateOutlet]="candidatesTemplate">
        </ng-container>
        <!-- TODO related agenda item to create/updade: internal status; parent_id ? -->
        <ng-container [ngTemplateOutlet]="pollTemplate"></ng-container>
        <!-- TODO different status/display if finished -->
    </mat-card>
</ng-template>

<!-- poll template -->
<ng-template #pollTemplate>
    <div class="ballot-controls-grid">
        <div class="ballot-title" *ngIf="assignment && assignment.polls && assignment.polls.length">
            <h3 translate>Election result</h3>
        </div>

        <div class="ballot-button" *ngIf="assignment && hasPerms('createPoll')">
            <button mat-button (click)="createPoll()">
                <mat-icon color="primary">poll</mat-icon>
                <span translate>New ballot</span>
            </button>
        </div>
    </div>
    <mat-tab-group
        (selectedTabChange)="onTabChange()"
        *ngIf="assignment && assignment.polls && assignment.polls.length"
    >
        <!-- TODO avoid animation/switching on update -->
        <mat-tab
            *ngFor="let poll of assignment.polls; let i = index; trackBy: trackByIndex"
            [label]="getPollLabel(poll, i)"
        >
            <os-assignment-poll [assignment]="assignment" [poll]="poll"> </os-assignment-poll>
        </mat-tab>
    </mat-tab-group>
</ng-template>

<ng-template #candidatesTemplate>
    <!-- Candidates -->
    <h3 translate>Candidates</h3>

    <!-- Candidate List -->
    <div>
        <div
            class="candidates-list"
            *ngIf="assignment && assignment.assignment_related_users && assignment.assignment_related_users.length > 0"
        >
            <os-sorting-list
                [input]="assignment.assignment_related_users"
                [live]="true"
                [count]="true"
                [enable]="hasPerms('manage')"
                (sortEvent)="onSortingChange($event)"
            >
                <!-- implicit item references into the component using ng-template slot -->
                <ng-template let-item>
                    <span *ngIf="hasPerms('addOthers')">
                        <button
                            mat-icon-button
                            matTooltip="{{ 'Remove candidate' | translate }}"
                            *osPerms="'assignments.can_manage'"
                            (click)="removeUser(item)"
                        >
                            <mat-icon>clear</mat-icon>
                        </button>
                    </span>
                </ng-template>
            </os-sorting-list>
        </div>

        <div class="add-candidates">
            <!-- Search for candidates -->
            <div class="search-field" *ngIf="hasPerms('addOthers')">
                <form
                    *ngIf="hasPerms('addOthers') && filteredCandidates && filteredCandidates.value.length > 0"
                    [formGroup]="candidatesForm"
                >
                    <os-search-value-selector
                        class="search-bar"
                        ngDefaultControl
                        [formControl]="candidatesForm.get('userId')"
                        [multiple]="false"
                        listname="{{ 'Select a new candidate' | translate }}"
                        [inputListValues]="filteredCandidates"
                    ></os-search-value-selector>
                </form>
            </div>

            <!-- Add me and remove me if OP has correct permission -->
            <div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates">
                <div>
                    <button mat-button color="accent" (click)="addSelf()" *ngIf="!isSelfCandidate">
                        <mat-icon>add</mat-icon>
                        <span translate>Add me</span>
                    </button>
                    <button mat-button color="accent" (click)="removeSelf()" *ngIf="isSelfCandidate">
                        <mat-icon>remove</mat-icon>
                        <span translate>Remove me</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <mat-divider
        *ngIf="assignment && assignment.polls && assignment.polls.length"
        class="candidate-list-separator"
    ></mat-divider>
</ng-template>

<!-- Form -->
<ng-template #assignmentFormTemplate>
    <mat-card class="os-form-card">
        <form
            class="content"
            [formGroup]="assignmentForm"
            (keydown)="onKeyDown($event)"
            *ngIf="assignment && editAssignment"
        >
            <div>
                <!-- title -->
                <mat-form-field class="full-width">
                    <input
                        matInput
                        placeholder="{{ 'Title' | translate }}"
                        formControlName="title"
                    />
                    <mat-error>{{ 'The title is required' | translate }}</mat-error>
                </mat-form-field>
            </div>

            <!-- description: HTML Editor -->
            <h4>{{ 'Description' | translate }}:</h4>
            <editor
                formControlName="description"
                [init]="tinyMceSettings"
                *ngIf="assignment && editAssignment"
            ></editor>

            <!-- searchValueSelector: tags -->
            <div class="content-field" *ngIf="tagsAvailable">
                <os-search-value-selector
                    ngDefaultControl
                    [formControl]="assignmentForm.get('tags_id')"
                    [multiple]="true"
                    [includeNone]="true"
                    listname="{{ 'Tags' | translate }}"
                    [inputListValues]="tagsObserver"
                ></os-search-value-selector>
            </div>

            <!-- Attachments -->
            <div class="content-field">
                <os-attachment-control
                    (errorHandler)="raiseError($event)"
                    [controlName]="assignmentForm.get('attachments_id')"
                ></os-attachment-control>
            </div>

            <os-agenda-content-object-form
                *ngIf="newAssignment"
                [form]="assignmentForm"
            ></os-agenda-content-object-form>

            <!-- poll_description_default -->
            <div>
                <mat-form-field>
                    <input
                        matInput
                        placeholder="{{ 'Default comment on the ballot paper' | translate }}"
                        formControlName="poll_description_default"
                    />
                </mat-form-field>
            </div>

            <!-- open posts: number -->
            <div>
                <mat-form-field>
                    <input
                        matInput
                        placeholder="{{ 'Number of persons to be elected' | translate }}"
                        formControlName="open_posts"
                        type="number"
                        required
                    />
                    <mat-error *ngIf="assignmentForm.get('open_posts').hasError('required')">{{
                        'This field is required.' | translate
                    }}</mat-error>
                    <mat-error *ngIf="assignmentForm.get('open_posts').hasError('min')">{{
                        'The number has to be greater than 0.' | translate
                    }}</mat-error>
                </mat-form-field>
            </div>
            <!-- TODO searchValueSelector: Parent -->
        </form>
    </mat-card>
</ng-template>
