<section class="dialog">
    <form (submit)="save()" [formGroup]="form">
        <div [translate]="translations[data.operation].title" class="dialog-header heading-l"></div>

        <div class="dialog-content">
            <div [translate]="translations[data.operation].details" class="mb-24"></div>

            <ng-container *ngIf="data.color">
                <div class="iqser-input-group required w-150">
                    <label translate="highlight-action-dialog.form.color.label"></label>
                    <input class="hex-color-input" formControlName="color" name="color" type="text" />
                    <div
                        [colorPicker]="form.get('color').value"
                        [cpDisabled]="true"
                        [style.background]="form.get('color').value"
                        class="input-icon"
                    ></div>
                </div>

                <iqser-details-radio [displayInRow]="true" [options]="options" class="mt-25" formControlName="option"></iqser-details-radio>
            </ng-container>

            <ng-container *ngIf="!data.color">
                <div class="iqser-input-group">
                    <mat-checkbox color="primary" formControlName="confirmation" name="confirmation">
                        {{ translations[data.operation].confirmation | translate : { count: data.highlights.length } }}
                    </mat-checkbox>
                </div>
            </ng-container>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                [disabled]="form.invalid"
                [label]="translations[data.operation].save | translate"
                [submit]="true"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>

            <div class="all-caps-label cancel" mat-dialog-close translate="highlight-action-dialog.actions.cancel"></div>

            <iqser-help-button *deny="roles.getRss" [helpButtonKey]="'highlights'"></iqser-help-button>
        </div>
    </form>

    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>
