<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-layers'"
    [label]="'Tenants' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-layers'"
    [label]="'Subtenants' | translate"
    [path]="'/tenants'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form
  [formGroup]="limitsForm"
  (ngSubmit)="onSubmit()"
>
  <div class="card card--fullpage m-b-0">
    <div class="card-header separator">
      <div
        class="card-title"
        translate
      >
        Limits
      </div>
    </div>

    <c8y-help src="/docs/enterprise-tenant/managing-tenants/#setting-limits"></c8y-help>

    <div class="inner-scroll">
      <div
        class="card-block"
        *ngIf="!initialized"
      >
        <c8y-loading></c8y-loading>
      </div>

      <div
        class="card-block"
        *ngIf="initialized"
      >
        <ng-container *ngFor="let key of fieldKeys">
          <ng-container *ngIf="fieldDefinitions[key].type === 'text'">
            <ng-container
              *ngTemplateOutlet="textField; context: { $implicit: fieldDefinitions[key] }"
            ></ng-container>
          </ng-container>
          <ng-container *ngIf="fieldDefinitions[key].type === 'number'">
            <ng-container
              *ngTemplateOutlet="numberField; context: { $implicit: fieldDefinitions[key] }"
            ></ng-container>
          </ng-container>
          <ng-container *ngIf="fieldDefinitions[key].type === 'checkbox'">
            <ng-container
              *ngTemplateOutlet="checkboxField; context: { $implicit: fieldDefinitions[key] }"
            ></ng-container>
          </ng-container>
        </ng-container>
      </div>
    </div>

    <div
      class="card-footer separator"
      *ngIf="initialized"
    >
      <button
        class="btn btn-default"
        type="button"
        [routerLink]="['/tenants']"
        translate
      >
        Cancel
      </button>
      <button
        class="btn btn-primary"
        type="submit"
        [disabled]="limitsForm.invalid"
        translate
      >
        Save
      </button>
    </div>
  </div>

  <ng-template
    #textField
    let-fieldDefinition
  >
    <c8y-form-group>
      <label [for]="fieldDefinition.id">
        {{ fieldDefinition.label | translate: fieldDefinition.labelArgs }}
      </label>
      <input
        class="form-control"
        type="text"
        [id]="fieldDefinition.id"
        [placeholder]="fieldDefinition.placeholder | translate: fieldDefinition.placeholderArgs"
        [formControlName]="fieldDefinition.id"
      />
    </c8y-form-group>
  </ng-template>

  <ng-template
    #numberField
    let-fieldDefinition
  >
    <c8y-form-group>
      <label [for]="fieldDefinition.id">
        {{ fieldDefinition.label | translate: fieldDefinition.labelArgs }}
      </label>
      <input
        class="form-control"
        type="number"
        [id]="fieldDefinition.id"
        [placeholder]="fieldDefinition.placeholder | translate: fieldDefinition.placeholderArgs"
        [formControlName]="fieldDefinition.id"
      />
    </c8y-form-group>
  </ng-template>

  <ng-template
    #checkboxField
    let-fieldDefinition
  >
    <c8y-form-group>
      <label
        class="c8y-checkbox"
        [title]="fieldDefinition.label | translate"
        [for]="fieldDefinition.id"
      >
        <input
          type="checkbox"
          [id]="fieldDefinition.id"
          [formControlName]="fieldDefinition.id"
        />
        <span></span>
        <span>{{ fieldDefinition.label | translate }}</span>
      </label>
    </c8y-form-group>
  </ng-template>
</form>