@if (tenant) {
  <c8y-title>
    {{ tenant.company }}
  </c8y-title>
}

<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">
      @if (initialized) {
        <div class="card-block">
          @for (key of fieldKeys; track key) {
            @switch (fieldDefinitions[key].type) {
              @case ('text') {
                <ng-container
                  *ngTemplateOutlet="textField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
              @case ('number') {
                <ng-container
                  *ngTemplateOutlet="numberField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
              @case ('checkbox') {
                <ng-container
                  *ngTemplateOutlet="checkboxField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
            }
          }
        </div>
      } @else {
        <div class="card-block">
          <c8y-loading></c8y-loading>
        </div>
      }
    </div>

    @if (initialized) {
      <div class="card-footer separator">
        <button
          class="btn btn-default"
          type="button"
          [routerLink]="['/tenants']"
          translate
        >
          Cancel
        </button>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="limitsForm.invalid || limitsForm.pristine"
          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"
      />
      @if (
        fieldDefinitions.deviceStorageLimitMiB &&
          fieldDefinitions.deviceStorageLimitMiB.id === fieldDefinition.id &&
          limitsForm.controls[fieldDefinition.id];
        as control
      ) {
        @if (!control.dirty || !control.errors) {
          <div class="icon-flex">
            <p class="help-block">
              <i
                class="text-info m-r-4"
                c8yIcon="info-circle"
              ></i>
              <span>{{ deviceStorageLimitInfoMessage | translate }}</span>
            </p>
          </div>
        }
      }
    </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>