<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!volumeSizes" overlayParent></app-fl-backdrop>
  <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
    <div *ngIf="regions.length > 0" layoutDirection="column" appFlex="60" xsFlex="100">
      <div *ngFor="let region of regions" layoutDirection="column">
        <div class="fl-margin-bottom" i18n>Region name: {{ region }}</div>
        <div *ngFor="let vsi of volumeSizes.volume_size_increments[region] | keyvalue"
             layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
          <mat-form-field appFlex="100" class="fl-margin-top-small">
            <mat-label>{{vsi.key + ' size increment'}}</mat-label>
            <input matInput type="number" name="{{ region }}_{{ vsi.key }}"
                   [(ngModel)]="volumeSizes.volume_size_increments[region][vsi.key]"
                   [placeholder]="vsi.key + ' size increment'"
                   (ngModelChange)="volumeSizes.volume_minimum_sizes[region][vsi.key] = $event"
                   step="1" min="1">
          </mat-form-field>
          <mat-form-field appFlex="100" class="fl-margin-top-small">
            <mat-label>{{vsi.key + ' minimum size'}}</mat-label>
            <input matInput type="number" name="minimum_{{ region }}_{{ vsi.key }}"
                   [(ngModel)]="volumeSizes.volume_minimum_sizes[region][vsi.key]"
                   [placeholder]="vsi.key + ' minimum size'"
                   [step]="volumeSizes.volume_size_increments[region][vsi.key]"
                   [min]="volumeSizes.volume_size_increments[region][vsi.key]">
          </mat-form-field>
        </div>
      </div>
    </div>
    <div *ngIf="regions.length === 0" layoutDirection="column" appFlex="50" xsFlex="100">
      <p i18n>No volume types found.</p>
    </div>
    <div layoutDirection="column" appFlex="40" class="fl-help-text hide-xs">
      <h3 i18n>Volume size increments</h3>
      <p class="fl-detail" i18n>
        Set the minimum step size that can be used when extending or shrinking a volume.
        For example, some storage types allow a minimum of 8GB when increasing or decreasing the available space.
        The default value is 1 GB for every volume type. Note that this feature is only supported in Fleio.
        The default OpenStack behaviour is to automatically round up the volume size if invalid values are provided.
      </p>
      <h3 i18n>Minimum volume sizes</h3>
      <p class="fl-detail" i18n>
        Set minimum volume size to be used when creating a volume.
        The value should be greater than zero and a multiple of volume size increment.
        The default value is 1 GB for every volume type.
        Note that this feature is only supported in Fleio. The default OpenStack behaviour is to
        automatically round up the volume size if invalid values are provided.
      </p>
    </div>
  </div>
  <div layoutDirection="row" class="fl-margin-top" layoutAlign="end" layoutDirection-xs="column">
    <button mat-button (click)="save()" [color]="'primary'" i18n>Save</button>
  </div>
</div>
