<h2 mat-dialog-title>Intercambiar artículo entre almacenes</h2>
<mat-dialog-content>

    @if (!isLoading) {
        <form class="override_content_flex" [formGroup]="formGroup">
            <div class="col-flex-12">
                <mat-form-field appearance="outline" class="w-100">
                    <mat-label>Almacén</mat-label>
                    <mat-select formControlName="warehouseIDControl" (ngModelChange)="searchArea()">
                        @for (warehouse of arrWarehouse; track warehouse) {
                            <mat-option [value]="warehouse.CODIGO_ALMACEN"> {{ warehouse.NOMBRE_ALMACEN }} ({{ warehouse.CODIGO_ALMACEN }}) </mat-option>
                        }
                    </mat-select>
                    <mat-icon matSuffix>store</mat-icon>
                    @if (formGroup.controls['warehouseIDControl'].hasError('required')) {
                        <mat-error title="El campo Almacén es requerido"> El campo <b>Almacén</b> es requerido </mat-error>
                    }
                </mat-form-field>
            </div>
            <div class="col-flex-12">
                @if (searchingArea) {
                    <mat-progress-bar mode="indeterminate" class="w-100 mb-20"></mat-progress-bar>
                } @else {
                    <mat-form-field appearance="outline" class="w-100">
                        <mat-label>Área</mat-label>
                        <mat-select formControlName="areaIDControl" (ngModelChange)="searchLevel()">
                            @for (areas of arrAreas; track areas) {
                                <mat-option [value]="areas.CODIGO_AREA"> {{ areas.NOMBRE_AREA }} ({{ areas.CODIGO_AREA }}) </mat-option>
                            }
                        </mat-select>
                        <mat-icon matSuffix>foundation</mat-icon>
                        @if (formGroup.controls['areaIDControl'].hasError('required')) {
                            <mat-error title="El campo Área es requerido"> El campo <b>Área</b> es requerido </mat-error>
                        }
                    </mat-form-field>
                }
            </div>
            <div class="col-flex-12">
                @if (searchingLevel) {
                    <mat-progress-bar mode="indeterminate" class="w-100 mb-20"></mat-progress-bar>
                } @else {
                    <mat-form-field appearance="outline" class="w-100">
                        <mat-label>Nivel</mat-label>
                        <mat-select formControlName="levelIDControl" (ngModelChange)="searchZone()">
                            @for (level of arrLevel; track level) {
                                <mat-option [value]="level.CODIGO_NIVEL"> {{ level.NOMBRE_NIVEL }} ({{ level.CODIGO_NIVEL }}) </mat-option>
                            }
                        </mat-select>
                        <mat-icon matSuffix>all_inbox</mat-icon>
                        @if (formGroup.controls['levelIDControl'].hasError('required')) {
                            <mat-error title="El campo Nivel es requerido"> El campo <b>Nivel</b> es requerido </mat-error>
                        }
                    </mat-form-field>
                }
            </div>
            <div class="col-flex-12">
                @if (searchingZone) {
                    <mat-progress-bar mode="indeterminate" class="w-100 mb-20"></mat-progress-bar>
                } @else {
                    <mat-form-field appearance="outline" class="w-100">
                        <mat-label>Zona</mat-label>
                        <mat-select formControlName="zoneIDControl" (ngModelChange)="setZone()">
                            @for (zone of arrZone; track zone) {
                                <mat-option [value]="zone.CODIGO_ZONA"> {{ zone.NOMBRE_ZONA }} ({{ zone.CODIGO_ZONA }}) </mat-option>
                            }
                        </mat-select>
                        <mat-icon matSuffix>inbox</mat-icon>
                        @if (formGroup.controls['zoneIDControl'].hasError('required')) {
                            <mat-error title="El campo Zona es requerido"> El campo <b>Zona</b> es requerido </mat-error>
                        }
                    </mat-form-field>
                }
                
            </div>
            <div class="col-flex-12">
                <span class="title-equipment">Código equipamiento</span>
                <div class="item-equipment">{{ codeEquipment }}</div>
            </div>
        </form>
    } @else {
        <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información del formulario" />
    }

</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="false">Cancelar</button>
    <button mat-button (click)="save()" [disabled]="formGroup.invalid || validateRepeatedValues() || isLoading || isLoadingForm">Guardar</button>
</mat-dialog-actions>
