<h1 mat-dialog-title>
    <span translate>Edit projector</span>
</h1>

<div class="settings-grid">
    <form [formGroup]="updateForm" (ngSubmit)="onSubmitProjector()">
        <div mat-dialog-content *ngIf="projector">
            <!-- Name field -->
            <mat-form-field>
                <input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
                <mat-hint *ngIf="!updateForm.controls.name.valid">
                    <span translate>Required</span>
                </mat-hint>
            </mat-form-field>

            <h3 translate>Resolution and size</h3>
            <!-- Aspect ratio field -->
            <div>
                <mat-radio-group formControlName="aspectRatio" name="aspectRatio">
                    <mat-radio-button
                        *ngFor="let ratio of defaultAspectRatio"
                        [value]="ratio"
                        (change)="onCustomAspectRatio(false)"
                    >
                        {{ ratio }}
                    </mat-radio-button>

                    <!-- Custom aspect ratio -->
                    <mat-radio-button (change)="onCustomAspectRatio(true)">
                        {{ 'custom' | translate }}
                    </mat-radio-button>

                    <mat-form-field *ngIf="customAspectRatio">
                        <input
                            matInput
                            type="text"
                            formControlName="aspectRatio"
                            [value]="previewProjector.aspectRatio"
                            (change)="setCustomAspectRatio()"
                            placeholder="{{ 'Custom aspect ratio' | translate }}"
                        />
                    </mat-form-field>
                </mat-radio-group>
            </div>

            <div class="spacer-top-20 grid-form">
                <mat-slider
                    class="grid-start"
                    formControlName="width"
                    [thumbLabel]="true"
                    [min]="minWidth"
                    [max]="maxResolution"
                    [step]="resolutionChangeStep"
                    [value]="updateForm.value.width"
                ></mat-slider>
                <div class="grid-end">
                    <mat-form-field>
                        <input
                            matInput
                            type="number"
                            formControlName="width"
                            [min]="minWidth"
                            [max]="maxResolution"
                            [step]="resolutionChangeStep"
                            [value]="updateForm.value.width"
                        />
                    </mat-form-field>
                </div>
            </div>

            <!-- checkboxes -->
            <div>
                <div>
                    <mat-checkbox formControlName="show_header_footer">
                        <span translate>Show header and footer</span>
                    </mat-checkbox>
                </div>
                <div>
                    <mat-checkbox formControlName="show_title">
                        <span translate>Show title</span>
                    </mat-checkbox>
                </div>
                <div>
                    <mat-checkbox formControlName="show_logo">
                        <span translate>Show logo</span>
                    </mat-checkbox>
                </div>
                <div>
                    <mat-checkbox formControlName="clock">
                        <span translate>Show clock</span>
                    </mat-checkbox>
                </div>
            </div>

            <!-- projection defaults -->
            <h3 translate>Projection defaults</h3>
            <mat-select
                formControlName="projectiondefaults_id"
                placeholder="{{ 'Projection defaults' | translate }}"
                [multiple]="true"
            >
                <mat-option *ngFor="let pd of projectionDefaults" [value]="pd.id">
                    {{ pd.getTitle() | translate }}
                </mat-option>
            </mat-select>

            <!-- colors -->
            <div class="spacer-top-10">
                <!-- Template to streamline all the color forms -->
                <ng-template #colorFormField let-title="title" let-form="form">
                    <div class="grid-form">
                        <div class="grid-start">
                            <mat-form-field class="color-picker-form">
                                <span>{{ title | translate }}</span>
                                <input matInput [formControlName]="form" type="color" />
                            </mat-form-field>
                        </div>
                        <div class="grid-end">
                            <button
                                type="button"
                                mat-icon-button
                                matTooltip="{{ 'Reset' | translate }}"
                                (click)="resetField(form)"
                            >
                                <mat-icon>replay</mat-icon>
                            </button>
                        </div>
                    </div>
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Foreground color', form: 'color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Background color', form: 'background_color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Header background color', form: 'header_background_color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Header font color', form: 'header_font_color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Headline color', form: 'header_h1_color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Chyron background color', form: 'chyron_background_color' }"
                >
                </ng-template>

                <ng-template
                    [ngTemplateOutlet]="colorFormField"
                    [ngTemplateOutletContext]="{ title: 'Chyron font color', form: 'chyron_font_color' }"
                >
                </ng-template>
            </div>
        </div>

        <!-- Actions -->
        <div mat-dialog-actions>
            <mat-divider></mat-divider>
            <button type="submit" mat-button color="primary">
                <span translate>Save</span>
            </button>
            <button type="button" mat-button [mat-dialog-close]="null">
                <span translate>Cancel</span>
            </button>
            <button type="button" mat-button (click)="applyChanges()">
                <span translate>Apply</span>
            </button>
        </div>
    </form>
    <div>
        <h3 translate>Preview</h3>
        <div class="preview-container">
            <os-projector #preview *ngIf="previewProjector" [projector]="previewProjector"></os-projector>
        </div>
    </div>
</div>
