<section class="dialog">
    <div
        [innerHTML]="'add-edit-component-mapping.dialog.title' | translate: { type: data.mapping ? 'edit' : 'add' }"
        class="dialog-header heading-l"
    ></div>
    <form (submit)="save()" [formGroup]="form">
        <div class="dialog-content">
            <div class="row">
                <div class="iqser-input-group required w-300">
                    <label translate="add-edit-component-mapping.form.name"></label>
                    <input
                        [placeholder]="'add-edit-component-mapping.form.name-placeholder' | translate"
                        formControlName="name"
                        name="label"
                        type="text"
                    />
                </div>

                <div class="iqser-input-group w-100 version" *ngIf="data?.mapping?.id">
                    <label translate="add-edit-component-mapping.form.version"></label>
                    <span> {{ data.mapping.version }} </span>
                </div>
            </div>

            <div class="iqser-input-group required">
                <label translate="add-edit-component-mapping.form.file"></label>
                <iqser-upload-file (fileChanged)="fileChanged($event)" [file]="activeFile" [accept]="'.csv'" />
            </div>

            <div class="row">
                <div class="iqser-input-group required w-150">
                    <label translate="add-edit-component-mapping.form.delimiter"></label>
                    <input
                        [placeholder]="'add-edit-component-mapping.form.delimiter-placeholder' | translate"
                        formControlName="delimiter"
                        name="delimiter"
                        type="text"
                    />
                </div>

                <div class="iqser-input-group required w-150">
                    <label translate="add-edit-component-mapping.form.encoding-type"></label>
                    <mat-form-field>
                        <mat-select formControlName="encoding">
                            <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
                                {{ translations[type] | translate }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                (action)="save()"
                [disabled]="disabled"
                [label]="'add-edit-component-mapping.actions.save' | translate"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>
        </div>
    </form>

    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
</section>
