<section class="dialog">
    <div [innerHTML]="'add-edit-file-attribute.title' | translate : titleTranslateParams" class="dialog-header heading-l"></div>

    <form [formGroup]="form">
        <div class="dialog-content">
            <div class="iqser-input-group required w-300">
                <label [translate]="'add-edit-file-attribute.form.name'"></label>
                <input
                    [placeholder]="'add-edit-file-attribute.form.name-placeholder' | translate"
                    formControlName="label"
                    name="label"
                    type="text"
                />
            </div>

            <div class="iqser-input-group w-300">
                <label [translate]="'add-edit-file-attribute.form.column-header'"></label>
                <input
                    [placeholder]="'add-edit-file-attribute.form.column-header-placeholder' | translate"
                    formControlName="csvColumnHeader"
                    name="csvColumnHeader"
                    type="text"
                />
            </div>

            <div class="iqser-input-group w-300 required">
                <label [translate]="'add-edit-file-attribute.form.type'"></label>
                <mat-form-field>
                    <mat-select formControlName="type">
                        <mat-option *ngFor="let type of typeOptions" [value]="type">
                            {{ translations[type] | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="options-wrapper">
                <div class="iqser-input-group">
                    <mat-slide-toggle color="primary" formControlName="readonly">{{
                        'add-edit-file-attribute.form.read-only' | translate
                    }}</mat-slide-toggle>
                </div>

                <div class="iqser-input-group mt-0">
                    <mat-checkbox color="primary" formControlName="primaryAttribute" name="primaryAttribute">
                        {{ 'add-edit-file-attribute.form.primary' | translate }}
                    </mat-checkbox>
                </div>

                <div class="red-input-group mt-0">
                    <mat-checkbox
                        [matTooltipDisabled]="canSetFilterable"
                        [matTooltip]="
                            'add-edit-file-attribute.form.filterable-disabled' | translate : { maxNumber: DISPLAYED_FILTERABLE_LIMIT }
                        "
                        color="primary"
                        formControlName="filterable"
                        matTooltipPosition="above"
                        name="filterable"
                    >
                        {{ 'add-edit-file-attribute.form.filterable' | translate }}
                    </mat-checkbox>
                </div>

                <div class="red-input-group mt-0">
                    <mat-checkbox
                        [matTooltipDisabled]="canSetDisplayed"
                        [matTooltip]="
                            'add-edit-file-attribute.form.displayed-disabled' | translate : { maxNumber: DISPLAYED_FILTERABLE_LIMIT }
                        "
                        color="primary"
                        formControlName="displayedInFileList"
                        matTooltipPosition="above"
                        name="displayedInFileList"
                    >
                        {{ 'add-edit-file-attribute.form.displayedInFileList' | translate }}
                    </mat-checkbox>
                </div>
            </div>
        </div>
        <div class="dialog-actions">
            <iqser-icon-button
                (action)="save()"
                [disabled]="disabled"
                [label]="'add-edit-file-attribute.save' | translate"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>

            <iqser-help-button *ngIf="!config.IS_DOCUMINE" [helpButtonKey]="'edit_delete_file_attribute'"></iqser-help-button>
        </div>
    </form>

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