<div class="create-image-container">
  <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} imagen</h2>
  <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
    <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
    <form *ngIf="!loading" [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
      <mat-card *ngIf="showWarning" class="warning-card">
        <mat-card-content>
          <mat-icon color="warn">warning</mat-icon>
          Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en
          el
          caso de que no exista previamente.
        </mat-card-content>
      </mat-card>
      <mat-form-field appearance="fill" class="form-field">
        <mat-label>{{ 'imageNameLabel' | translate }}</mat-label>
        <input matInput formControlName="name" required>
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field" *ngIf="!imageId">
        <mat-label>{{ 'repositoryLabel' | translate }}</mat-label>
        <mat-select formControlName="imageRepositories" required multiple>
          <mat-option *ngFor="let imageRepository of repositories" [value]="imageRepository['@id']">
            {{ imageRepository.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
        <input matInput formControlName="description" name="description">
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <mat-label>{{ 'commentsLabel' | translate }}</mat-label>
        <input matInput formControlName="comments" name="comments">
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <mat-label>Perfil de software</mat-label>
        <mat-select formControlName="softwareProfile">
          <mat-option *ngFor="let profile of softwareProfiles" [value]="profile['@id']">
            {{ profile.description }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-checkbox formControlName="remotePc">
        {{ 'remotePcLabel' | translate }}
      </mat-checkbox>

      <mat-checkbox formControlName="isGlobal" (click)="changeIsGlobal()">
        {{ 'globalImageLabel' | translate }}
      </mat-checkbox>

      <mat-divider *ngIf="imageId && partitionInfo"></mat-divider>

      <div *ngIf="imageId && partitionInfo" class="partition-info-container">
        <h3>Información de Partición de origen</h3>
        <p>Sistema de archivos: {{ partitionInfo['filesystem'] }}</p>
        <p>Disco: {{ partitionInfo['numDisk'] }}</p>
        <p>Particion: {{ partitionInfo['numPartition'] }}</p>
        <p>Nombre del SO: {{ partitionInfo['osName'] }}</p>
        <p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
      </div>
    </form>
  </div>

  <mat-dialog-actions class="action-container">
    <button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
    <button class="submit-button" (click)="saveImage()" [disabled]="loading">{{ 'saveButton' | translate }}</button>
  </mat-dialog-actions>
</div>