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

    <div class="dialog-content">
        <div class="sub-header">
            <div class="left">
                <div class="info"><span [translate]="'file-attributes-csv-import.file'"> </span> {{ data.csv.name }}</div>
                <div class="large-label">
                    {{ 'file-attributes-csv-import.total-rows' | translate : { rows: parseResult?.data?.length } }}
                </div>
            </div>
            <div class="right">
                <form (submit)="changedParseConfig && readFile()" [formGroup]="form">
                    <div class="iqser-input-group required w-250">
                        <label>{{ 'file-attributes-csv-import.key-column' | translate }}</label>
                        <mat-form-field>
                            <input
                                [matAutocomplete]="auto"
                                [placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
                                formControlName="filenameMappingColumnHeaderName"
                                matInput
                                type="text"
                            />
                            <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
                                <ng-container *ngIf="filteredKeyOptions | async as fields">
                                    <mat-option *ngFor="let field of fields" [value]="field">
                                        {{ field }}
                                    </mat-option>
                                </ng-container>
                            </mat-autocomplete>
                        </mat-form-field>
                    </div>

                    <div class="iqser-input-group required w-110">
                        <label translate="file-attributes-csv-import.delimiter"></label>
                        <input
                            (keyup)="readFile(false)"
                            [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
                            formControlName="delimiter"
                            name="delimiter"
                            type="text"
                        />
                    </div>

                    <div class="iqser-input-group required w-160">
                        <label translate="file-attributes-csv-import.encoding"></label>

                        <mat-form-field>
                            <mat-select (selectionChange)="readFile()" formControlName="encoding">
                                <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
                                    {{ translations[type] | translate }}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                    <iqser-circle-button
                        (action)="readFile()"
                        *ngIf="changedParseConfig"
                        [tooltip]="'file-attributes-csv-import.parse-csv' | translate"
                        icon="iqser:check"
                    ></iqser-circle-button>
                </form>
            </div>
        </div>
        <div class="csv-part">
            <div class="left">
                <div class="csv-part-header">
                    <div>
                        <span class="all-caps-label">{{
                            'file-attributes-csv-import.available' | translate : { value: parseResult?.meta?.fields.length }
                        }}</span>
                        <span class="all-caps-label">{{
                            'file-attributes-csv-import.selected' | translate : { value: activeFields.length }
                        }}</span>
                    </div>
                    <div class="actions">
                        <iqser-circle-button
                            (action)="isSearchOpen = !isSearchOpen"
                            [attr.aria-expanded]="isSearchOpen"
                            icon="iqser:search"
                        ></iqser-circle-button>
                        <div class="quick-activation">
                            <span
                                (click)="activateAll()"
                                [translate]="'file-attributes-csv-import.quick-activation.all'"
                                class="all-caps-label primary pointer"
                            ></span>
                            <span
                                (click)="deactivateAll()"
                                [translate]="'file-attributes-csv-import.quick-activation.none'"
                                class="all-caps-label primary pointer"
                            ></span>
                        </div>
                    </div>
                </div>
                <div *ngIf="isSearchOpen" class="search-input-container">
                    <iqser-input-with-action
                        [(value)]="searchService.searchValue"
                        [placeholder]="'file-attributes-csv-import.search.placeholder' | translate"
                        width="full"
                    ></iqser-input-with-action>
                </div>
                <div *ngIf="listingService.sortedDisplayedEntities$ | async as fields" class="csv-header-pill-content">
                    <div
                        (click)="toggleFieldActive(field)"
                        (mouseenter)="setHoveredColumn(field.csvColumn)"
                        (mouseleave)="setHoveredColumn()"
                        *ngFor="let field of fields; trackBy: trackBy"
                        class="csv-header-pill-wrapper"
                    >
                        <div [class.selected]="isActive(field)" class="csv-header-pill">
                            <div class="name">
                                {{ field.csvColumn }}
                            </div>
                            <div class="secondary">
                                <div class="entry-count small-label">
                                    {{ getEntries(field.csvColumn) }}
                                    entries
                                </div>
                                <div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                (mouseenter)="keepPreview = true"
                (mouseleave)="keepPreview = false; setHoveredColumn()"
                [class.collapsed]="!previewExpanded"
                class="center"
            >
                <div class="csv-part-header">
                    <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
                    <iqser-circle-button
                        (action)="previewExpanded = !previewExpanded"
                        [icon]="previewExpanded ? 'iqser:expand' : 'iqser:collapse'"
                    ></iqser-circle-button>
                </div>
                <div [class.hidden]="!previewExpanded" class="csv-part-content">
                    <div *ngIf="!hoveredColumn" class="no-column-data" translate="file-attributes-csv-import.no-hovered-column"></div>
                    <div *ngIf="hoveredColumn && !columnSample.length" class="no-column-data">
                        {{ 'file-attributes-csv-import.no-sample-data-for' | translate : { column: hoveredColumn } }}
                    </div>
                    <div *ngFor="let row of columnSample">
                        {{ row }}
                    </div>
                </div>
            </div>
            <div class="flex-1">
                <redaction-active-fields-listing
                    (setHoveredColumn)="setHoveredColumn($event)"
                    (toggleFieldActive)="toggleFieldActive($event)"
                    [(entities)]="activeFields"
                ></redaction-active-fields-listing>
            </div>
        </div>
    </div>

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

        <div (click)="dialogRef.close()" class="all-caps-label cancel">
            {{ 'file-attributes-csv-import.cancel' | translate }}
        </div>
    </div>

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