<app-loading [isLoading]="loading"></app-loading>

<div *ngIf="!loading">
    <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
    <div class="mat-dialog-content">
        <!-- Paso 1: General -->
        <span class="step-title">General</span>
        <form [formGroup]="generalFormGroup" class="grid-form">
            <mat-form-field class="form-field" appearance="fill">
                <mat-label>Tipo</mat-label>
                <mat-select formControlName="type" required>
                    <mat-option *ngFor="let type of filteredTypes" [value]="type">
                        {{ typeTranslations[type] }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="fill">
                <mat-label>Nombre</mat-label>
                <input matInput formControlName="name" required>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="fill">
                <mat-label>Padre</mat-label>
                <mat-select formControlName="parent" (selectionChange)="onParentChange($event)">
                    <mat-select-trigger>
                        {{ getSelectedParentName() }}
                    </mat-select-trigger>
                    <mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
                        <div>{{ unit.name }}</div>
                        <div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="form-field description-form-field" appearance="fill">
                <mat-label>Descripción</mat-label>
                <textarea matInput formControlName="description"></textarea>
            </mat-form-field>

            <mat-checkbox formControlName="excludeParentChanges">
                {{ 'excludeParentChanges' | translate }}
            </mat-checkbox>
        </form>

        <!-- Paso 2: Información del Aula -->
        <span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span>
        <form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form"
            [formGroup]="classroomInfoFormGroup">
            <mat-form-field class="form-field">
                <mat-label>Localización</mat-label>
                <input matInput formControlName="location">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Aforo</mat-label>
                <input matInput formControlName="capacity" type="number" min="0">
                <mat-error *ngIf="classroomInfoFormGroup.get('capacity')?.hasError('min')">
                    El aforo no puede ser negativo
                </mat-error>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="fill" style="grid-column: span 1;">
                <mat-label>Calendario Asociado</mat-label>
                <mat-select formControlName="remoteCalendar" (selectionChange)="onCalendarChange($event)">
                    <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
                        {{ calendar.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <div class="projector-board-field">
                <mat-slide-toggle formControlName="projector">Proyector</mat-slide-toggle>
                <mat-slide-toggle formControlName="board">Pizarra</mat-slide-toggle>
            </div>
        </form>

        <!-- Paso 3: Configuración de Red -->
        <span class="step-title">Configuración de Red</span>
        <form [formGroup]="networkSettingsFormGroup" class="grid-form">
            <mat-form-field class="form-field">
                <mat-label>OgLive</mat-label>
                <mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
                    <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
                        {{ oglive.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Repositorio</mat-label>
                <mat-select formControlName="repository" (selectionChange)="onRepositoryChange($event)">
                    <mat-option *ngFor="let repository of repositories" [value]="repository['@id']">
                        {{ repository.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Proxy</mat-label>
                <input matInput formControlName="proxy">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>DNS</mat-label>
                <input matInput formControlName="dns">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Máscara de Red</mat-label>
                <input matInput formControlName="netmask">
            </mat-form-field>
          <mat-form-field class="form-field">
            <mat-label i18n="@@netiface-label">Interfaz de red</mat-label>
            <mat-select formControlName="netiface">
              <mat-option *ngFor="let type of netifaceTypes" [value]="type.value">
                {{ type.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Router</mat-label>
                <input matInput formControlName="router">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>NTP</mat-label>
                <input matInput formControlName="ntp">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Modo P2P</mat-label>
                <mat-select formControlName="p2pMode">
                    <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
                        {{ option.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Tiempo P2P</mat-label>
                <input matInput formControlName="p2pTime" type="number">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Mcast IP</mat-label>
                <input matInput formControlName="mcastIp">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Mcast Speed</mat-label>
                <input matInput formControlName="mcastSpeed" type="number">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Mcast Port</mat-label>
                <input matInput formControlName="mcastPort" type="number">
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Mcast Mode</mat-label>
                <mat-select formControlName="mcastMode">
                    <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
                        {{ option.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Menu</mat-label>
                <mat-select formControlName="menu">
                    <mat-option *ngFor="let menu of menus" [value]="menu['@id']">
                        {{ menu.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
                <mat-label>Perfil de Hardware</mat-label>
                <mat-select formControlName="hardwareProfile">
                    <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description
                        }}</mat-option>
                </mat-select>
                <mat-error>Formato de URL incorrecto</mat-error>
            </mat-form-field>
        </form>

        <!-- Paso 4: Información Adicional -->
        <span class="step-title">Información Adicional</span>
        <form [formGroup]="additionalInfoFormGroup">
            <mat-form-field class="form-field">
                <mat-label>Comentarios</mat-label>
                <textarea matInput formControlName="comments"></textarea>
            </mat-form-field>
        </form>
    </div>
    <div class="mat-dialog-actions">
        <button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
        <button class="submit-button" (click)="onSubmit()"
            [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
            isEditMode ? 'Editar' : 'Crear' }}</button>
    </div>
</div>
