<os-head-bar
    [hasMainButton]="isAllowed('edit')"
    mainButtonIcon="edit"
    [nav]="false"
    [goBack]="true"
    [editMode]="editTopic"
    [isSaveButtonEnabled]="topicForm.valid"
    (mainEvent)="setEditMode(!editTopic)"
    (saveEvent)="saveTopic()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2>
            <span *ngIf="newTopic" translate>New topic</span>
            <span *ngIf="editTopic && !newTopic" translate>Edit topic</span>
            <span *ngIf="!newTopic && !editTopic" translate>Topic</span>
        </h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot" *osPerms="'agenda.can_manage'; or: 'agenda.can_see_list_of_speakers'">
        <button type="button" mat-icon-button [matMenuTriggerFor]="topicExtraMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<mat-card *ngIf="topic || editTopic" [ngClass]="editTopic ? 'os-form-card' : 'os-card'">
    <div *ngIf="!editTopic">
        <h1>{{ topic.getTitle() }}</h1>
    </div>
    <div>
        <span *ngIf="!editTopic">
            <!-- Render topic text as HTML -->
            <div [innerHTML]="topic.text | trust: 'html'"></div>
        </span>
    </div>

    <div *ngIf="topic.hasAttachments() && !editTopic">
        <h3>
            <span translate>Attachments</span>:
            <mat-list dense>
                <mat-list-item *ngFor="let file of topic.attachments">
                    <a [routerLink]="file.url" target="_blank">{{ file.getTitle() }}</a>
                </mat-list-item>
            </mat-list>
        </h3>
    </div>

    <form *ngIf="editTopic" [formGroup]="topicForm" (keydown)="onKeyDown($event)">
        <div>
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    osAutofocus
                    required
                    formControlName="title"
                    placeholder="{{ 'Title' | translate }}"
                />
                <mat-error *ngIf="topicForm.invalid" translate>A name is required</mat-error>
            </mat-form-field>
        </div>

        <!-- The editor -->
        <div class="spacer-bottom-20">
            <h4 translate>Text</h4>
            <editor formControlName="text" [init]="tinyMceSettings"></editor>
        </div>

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

        <div *ngIf="newTopic">
            <!-- Visibility -->
            <div>
                <mat-form-field>
                    <mat-select formControlName="agenda_type" placeholder="{{ 'Agenda visibility' | translate }}">
                        <mat-option *ngFor="let type of itemVisibility" [value]="type.key">
                            <span>{{ type.name | translate }}</span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Parent item -->
            <div>
                <os-search-value-selector
                    ngDefaultControl
                    [formControl]="topicForm.get('agenda_parent_id')"
                    [includeNone]="true"
                    listname="{{ 'Parent agenda item' | translate }}"
                    [inputListValues]="itemObserver"
                ></os-search-value-selector>
            </div>
        </div>
    </form>
</mat-card>

<mat-menu #topicExtraMenu="matMenu">
    <os-projector-button [object]="topic" [menuItem]="true"></os-projector-button>
    <os-speaker-button [object]="topic" [menuItem]="true"></os-speaker-button>
    <div>
        <mat-divider></mat-divider>
        <button *osPerms="'agenda.can_manage'" mat-menu-item class="red-warning-text" (click)="onDeleteButton()">
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </div>
</mat-menu>
