<div class="create-client-container">
    <h1 mat-dialog-title>{{ dialogTitle | translate }}</h1>
    <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
        <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
        <form *ngIf="clientForm && !loading" [formGroup]="clientForm" class="client-form grid-form">
            <mat-form-field class="form-field">
                <mat-label>{{ 'organizationalUnitLabel' | translate }}</mat-label>
                <mat-select formControlName="organizationalUnit" (selectionChange)="onParentChange($event)">
                    <mat-select-trigger>
                        {{ getSelectedParentName() }}
                    </mat-select-trigger>
                    <mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
                        <div class="unit-name">{{ 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">
                <mat-label>{{ 'nameLabel' | translate }}</mat-label>
                <input matInput formControlName="name" required>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'ogLiveLabel' | translate }}</mat-label>
                <mat-select formControlName="ogLive">
                    <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>{{ 'serialNumberLabel' | translate }}</mat-label>
                <input matInput formControlName="serialNumber">
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'netifaceLabel' | translate }}</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>{{ 'netDriverLabel' | translate }}</mat-label>
                <mat-select formControlName="netDriver">
                    <mat-option *ngFor="let type of netDriverTypes" [value]="type.value">
                        {{ type.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'macLabel' | translate }}</mat-label>
                <input matInput formControlName="mac" required>
                <mat-error>{{ 'macError' | translate }}</mat-error>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'ipLabel' | translate }}</mat-label>
                <input matInput formControlName="ip" required>
                <mat-error>{{ 'ipError' | translate }}</mat-error>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'templateLabel' | translate }}</mat-label>
                <mat-select formControlName="template">
                    <mat-option *ngFor="let template of templates" [value]="template['@id']">
                        {{ template.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'hardwareProfileLabel' | translate }}</mat-label>
                <mat-select formControlName="hardwareProfile">
                    <mat-option *ngFor="let profile of hardwareProfiles" [value]="profile['@id']">
                        {{ profile.description }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="form-field">
                <mat-label>{{ 'repositoryLabel' | translate }}</mat-label>
                <mat-select formControlName="repository">
                    <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>{{ 'menuLabel' | translate }}</mat-label>
                <mat-select formControlName="menu">
                    <mat-option *ngFor="let menu of menus" [value]="menu['@id']">
                        {{ menu.name }}
                    </mat-option>
                </mat-select>
                <mat-error>{{ 'menuError' | translate }}</mat-error>
            </mat-form-field>

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

    <div mat-dialog-actions class="action-container">
        <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
        <button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()">
            {{ isEditMode ? 'Guardar' : 'Crear' }}
        </button>
    </div>
</div>
