<h2 mat-dialog-title>{{ softwareProfileId ? 'Editar' : 'Crear' }} perfil de software</h2>

<mat-dialog-content class="form-container">
  <mat-tab-group>
    <mat-tab label="Formulario">
      <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form-group">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Descripción</mat-label>
          <input matInput formControlName="description" placeholder="Descripción del comando" required>
        </mat-form-field>
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Comentarios</mat-label>
          <input matInput formControlName="comments" placeholder="Comentarios del comando">
        </mat-form-field>
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Seleccionar unidad organizativa</mat-label>
          <mat-select formControlName="organizationalUnit" required>
            <mat-option *ngFor="let ou of organizationalUnits" [value]="ou['@id']">
              {{ ou.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Seleccionar sistema operativo</mat-label>
          <mat-select formControlName="operativeSystem">
            <mat-option *ngFor="let op of operativeSystems" [value]="op['@id']">
              {{ op.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>
    </mat-tab>

    <mat-tab label="Seleccionar Software">
      <div class="form-group">
        <mat-form-field appearance="fill" class="full-width">
          <input type="text" matInput [formControl]="softwareControl" [matAutocomplete]="clientAuto"
            placeholder="Seleccione software para añadir">

          <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
            (optionSelected)="onOptionClientSelected($event.option.value)">

            <mat-option *ngFor="let software of filteredSoftware | async" [value]="software">
              {{ software.name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

        <div class="software-list">
          <mat-list>
            <mat-list-item *ngFor="let software of selectedSoftwares">
              {{ software.name }}
              <button mat-icon-button (click)="removeSoftware(software)">
                <mat-icon>delete</mat-icon>
              </button>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="onCancel($event)">Cancelar</button>
  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>