<form *ngIf="form" [formGroup]="form">
    <div class="row">
        <div class="iqser-input-group required">
            <label translate="add-edit-entity.form.name"></label>
            <input [placeholder]="'add-edit-entity.form.name-placeholder' | translate" formControlName="label" name="label" type="text" />
        </div>

        <div *ngIf="form.get('rank')" class="iqser-input-group required w-75">
            <label translate="add-edit-entity.form.rank"></label>
            <input [placeholder]="'add-edit-entity.form.rank-placeholder' | translate" formControlName="rank" name="rank" type="number" />
        </div>
    </div>

    <div class="row mt-14">
        <div *ngFor="let color of colors" class="iqser-input-group required">
            <label [translateParams]="color.labelParams()" [translate]="color.label"></label>
            <input
                [formControlName]="color.controlName"
                [name]="color.controlName"
                [placeholder]="color.placeholder | translate"
                class="hex-color-input"
                type="text"
            />
            <div
                (colorPickerChange)="form.get(color.controlName).setValue($event)"
                [colorPicker]="form.get(color.controlName).value"
                [cpDisabled]="cpDisabled(color)"
                [cpOutputFormat]="'hex'"
                [style.background]="form.get(color.controlName).value"
                [style.cursor]="cpDisabled(color) ? 'default' : 'pointer'"
                class="input-icon"
            >
                <mat-icon *ngIf="color.hasColor$ | async" svgIcon="red:color-picker"></mat-icon>
            </div>
        </div>
    </div>

    <div *ngIf="form.get('type')" class="iqser-input-group mb-14">
        <label translate="add-edit-entity.form.technical-name"></label>
        <div class="technical-name">{{ this.form.get('type').value || '-' }}</div>
        <span
            [translateParams]="{ type: entity ? 'edit' : 'create' }"
            [translate]="'add-edit-entity.form.technical-name-hint'"
            class="hint"
        ></span>
    </div>

    <div *ngIf="form.get('hint') && !isDocumine" class="iqser-input-group slider-row">
        <mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
            <mat-button-toggle [value]="false">
                {{ 'add-edit-entity.form.redaction' | translate }}
            </mat-button-toggle>
            <mat-button-toggle [value]="true">
                {{ 'add-edit-entity.form.hint' | translate }}
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>

    <div *ngIf="form.get('defaultReason') && !isDocumine" class="iqser-input-group w-400">
        <label translate="add-edit-entity.form.default-reason"></label>
        <mat-form-field>
            <mat-select
                [placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
                formControlName="defaultReason"
            ></mat-select>
        </mat-form-field>
    </div>

    <div *ngIf="form.get('description')" class="iqser-input-group w-400">
        <label translate="add-edit-entity.form.description"></label>
        <textarea
            [placeholder]="'add-edit-entity.form.description-placeholder' | translate"
            formControlName="description"
            iqserHasScrollbar
            name="description"
            rows="4"
            type="text"
        ></textarea>
    </div>

    <div *ngIf="form.get('hasDictionary')" class="iqser-input-group">
        <mat-slide-toggle color="primary" formControlName="hasDictionary">
            {{ 'add-edit-entity.form.has-dictionary' | translate }}
        </mat-slide-toggle>
    </div>

    <div *ngIf="form.get('hasDictionary')?.value" class="dictionary-extras">
        <ng-container *ngIf="!isDocumine">
            <span
                (click)="toggleDossierOnlyEntity()"
                *ngIf="form.get('dossierDictionaryOnly') as field"
                [class.cursor-pointer]="!field.disabled"
                [class.disabled]="field.disabled"
                class="round-checkbox-form-entry"
            >
                <iqser-round-checkbox [active]="!field.value" [size]="18"></iqser-round-checkbox>
                {{ 'add-edit-entity.form.template-and-dossier-dictionaries' | translate }}
            </span>
            <span
                (click)="toggleDossierOnlyEntity()"
                *ngIf="form.get('dossierDictionaryOnly') as field"
                [class.cursor-pointer]="!field.disabled"
                [class.disabled]="field.disabled"
                class="round-checkbox-form-entry"
            >
                <iqser-round-checkbox [active]="field.value" [size]="18"></iqser-round-checkbox>
                {{ 'add-edit-entity.form.dossier-dictionary-only' | translate }}
            </span>

            <div *ngIf="form.get('manageEntriesInDictionaryEditorOnly')" class="iqser-input-group">
                <mat-checkbox
                    color="primary"
                    formControlName="manageEntriesInDictionaryEditorOnly"
                    name="manageEntriesInDictionaryEditorOnly"
                >
                    {{ 'add-edit-entity.form.manage-entries-in-dictionary-editor-only' | translate }}
                </mat-checkbox>
            </div>
        </ng-container>

        <div *ngIf="form.get('caseSensitive')" class="iqser-input-group">
            <mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
                {{ 'add-edit-entity.form.case-sensitive' | translate }}
            </mat-checkbox>
        </div>
    </div>
</form>
