<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="volumeTypeForm" layoutDirection="column" class="fl-content">
  <app-form-errors #formErrors [formGroup]="volumeTypeForm"></app-form-errors>

  <mat-form-field *ngIf="!object.id">
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region_name" placeholder="Region" i18n-placeholder required>
      <mat-option *ngFor="let region of regions.objects" [value]="region.id">
        {{ region.id }}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['region']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Name</mat-label>
    <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
    <mat-error>{{fieldErrors['name']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Description</mat-label>
    <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>

  <mat-checkbox formControlName="is_public" color="primary" i18n>Is public</mat-checkbox>

  <div *ngIf="volumeTypeForm.contains('extra_specs')">
    <h3 class="fl-detail fl-margin-top-medium fl-margin-bottom-small" i18n>Extra specs</h3>

    <span class="fl-detail" *ngIf="extraSpecs.controls.length === 0" i18n>No extra specs.</span>

    <ng-container *ngFor="let property of extraSpecs.controls; let index = index">
      <div [formGroup]="property" layoutDirection="row" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field appFlex="50">
          <mat-label i18n>Property key</mat-label>
          <input matInput placeholder="Property key" i18n-placeholder type="text" formControlName="key" required>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Property value</mat-label>
          <input matInput placeholder="Property value" i18n-placeholder type="text" formControlName="value" required>
        </mat-form-field>
        <a mat-icon-button fl-tooltip="Delete property" i18n-fl-tooltip
           fl-tooltip-direction="left" class="pull-delete-up"
           (click)="deleteProperty(index)">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
    </ng-container>
    <div layoutDirection="row" appLayoutGap="10px" layoutAlign="center center">
      <a mat-mini-fab (click)="addProperty()" class="add-item-button">
        <mat-icon>add</mat-icon>
      </a>
      <p i18n>Add volume type extra spec</p>
    </div>
  </div>

</form>
