<section class="dialog">
    <div [translate]="'file-attributes-configurations.title'" class="dialog-header heading-l"></div>

    <form [formGroup]="form">
        <div class="dialog-content">
            <div class="iqser-input-group w-300">
                <mat-slide-toggle color="primary" formControlName="supportCsvMapping">{{
                    'file-attributes-configurations.form.support-csv-mapping' | translate
                }}</mat-slide-toggle>
            </div>
            <ng-container *ngIf="form.get('supportCsvMapping').value">
                <div class="iqser-input-group required w-250">
                    <label [translate]="'file-attributes-configurations.form.key-column'"></label>
                    <input
                        [placeholder]="'file-attributes-configurations.form.key-column' | translate"
                        formControlName="keyColumn"
                        name="keyColumn"
                        type="text"
                    />
                </div>

                <div class="iqser-input-group required w-110">
                    <label [translate]="'file-attributes-configurations.form.delimiter'"></label>
                    <input
                        [placeholder]="'file-attributes-configurations.form.delimiter' | translate"
                        formControlName="delimiter"
                        name="delimiter"
                        type="text"
                    />
                </div>

                <div class="iqser-input-group w-150 required">
                    <label [translate]="'file-attributes-configurations.form.encoding-type'"></label>
                    <mat-form-field>
                        <mat-select formControlName="encodingType">
                            <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
                                {{ translations[type] | translate }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </ng-container>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                (action)="save()"
                [disabled]="disabled"
                [label]="'file-attributes-configurations.save' | translate"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>

            <div (click)="close()" [translate]="'file-attributes-configurations.cancel'" class="all-caps-label cancel"></div>
        </div>
    </form>

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