<!-- Title -->
<h2 mat-dialog-title *ngIf="data">{{ data.title | translate }}</h2>

<form [formGroup]="selectForm" *ngIf="data">
    <!-- Content -->
    <div mat-dialog-content *ngIf="data.choices">
        <os-search-value-selector
            ngDefaultControl
            [multiple]="data.multiSelect"
            [formControl]="selectForm.get('select')"
            [inputListValues]="data.choices"
        >
        </os-search-value-selector>
    </div>

    <!-- Actions -->
    <div mat-dialog-actions>
        <!-- Custom Actions -->
        <div *ngIf="data.actionButtons">
            <button
                *ngFor="let button of data.actionButtons"
                mat-button
                (click)="closeDialog(true, button)"
                [disabled]="!hasSelection"
            >
                <span>{{ button | translate }}</span>
            </button>
        </div>

        <!-- Normal okay button -->
        <div *ngIf="!data.actionButtons">
            <button
                *ngIf="!data.multiSelect || data.choices"
                mat-button
                (click)="closeDialog(true)"
                [disabled]="!hasSelection"
            >
                <span>OK</span>
            </button>
        </div>

        <!-- Clear choice button -->
        <button mat-button *ngIf="data.clearChoice" (click)="closeDialog(true, data.clearChoice)">
            <span>{{ data.clearChoice }}</span>
        </button>

        <!-- Cancel -->
        <button mat-button (click)="closeDialog(false)">
            <span translate>Cancel</span>
        </button>
    </div>
</form>
