@if (title) {
  <c8y-title>
    {{ title }}
  </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]="tenantForm"
  (ngSubmit)="onSubmit()"
>
  <div class="card content-fullpage d-grid grid__col--8-4--md">
    <div class="inner-scroll bg-level-0">
      <div class="card-header separator large-padding sticky-top">
        <div
          class="card-title"
          translate
        >
          Identification
        </div>
      </div>

      <div>
        @if (!initialized) {
          <div class="card-block">
            <c8y-loading></c8y-loading>
          </div>
        }

        @if (initialized) {
          <div class="card-block">
            @for (key of fieldKeys; track key) {
              @if (fieldDefinitions[key].type === 'text') {
                <ng-container
                  *ngTemplateOutlet="textField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
              @if (fieldDefinitions[key].type === 'number') {
                <ng-container
                  *ngTemplateOutlet="numberField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
              @if (fieldDefinitions[key].type === 'checkbox') {
                <ng-container
                  *ngTemplateOutlet="checkboxField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
              @if (fieldDefinitions[key].type === 'select') {
                <ng-container
                  *ngTemplateOutlet="selectField; context: { $implicit: fieldDefinitions[key] }"
                ></ng-container>
              }
            }
          </div>
        }
      </div>
    </div>
    @if (!isNew && tenant) {
      <div class="inner-scroll bg-level-1">
        <c8y-support-user-access [tenant]="tenant"></c8y-support-user-access>
      </div>
    }

    <!-- FOOTER CARD -->
    @if (initialized) {
      <div class="card-footer separator large-padding grid__col--fullspan">
        <button
          class="btn btn-default"
          title="{{ 'Cancel' | translate }}"
          type="button"
          [routerLink]="['/tenants']"
          data-cy="c8y-tenant-form--cancelButton"
        >
          {{ 'Cancel' | translate }}
        </button>
        <button
          class="btn btn-primary"
          title="{{ 'Save' | translate }}"
          type="submit"
          [disabled]="shouldDisableSave()"
          data-cy="c8y-tenant-form--saveButton"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    }
  </div>

  <!-- NG TEMPLATES -->
  <ng-template
    #textField
    let-fieldDefinition
  >
    <c8y-form-group>
      <label [for]="fieldDefinition.id">
        {{ fieldDefinition.label | translate: fieldDefinition.labelArgs }}
      </label>
      <div class="input-group">
        <input
          class="form-control"
          type="text"
          [id]="fieldDefinition.id"
          [placeholder]="fieldDefinition.placeholder | translate: fieldDefinition.placeholderArgs"
          [formControlName]="fieldDefinition.id"
          [attr.data-cy]="'c8y-tenant-form--' + fieldDefinition.id"
        />
        @if (fieldDefinition.id === 'domain' && host && isNew) {
          <span class="input-group-addon">
            {{ host }}
          </span>
        }
      </div>
    </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"
        [attr.data-cy]="'c8y-tenant-form--' + 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"
          (change)="onCheckboxChange(fieldDefinition.id)"
          [attr.data-cy]="'c8y-tenant-form--' + fieldDefinition.id"
        />
        <span></span>
        <span>{{ fieldDefinition.label | translate }}</span>
      </label>
    </c8y-form-group>
    @if (showPasswordComponent && fieldDefinition.id === 'sendPasswordResetEmail') {
      <form #passwordForm="ngForm">
        <c8y-new-password
          [showChangePasswordButton]="false"
          [requireStrongPassword]="passwordStrengthEnforced"
          (password)="onNewPasswordChanged($event)"
        ></c8y-new-password>
      </form>
    }
  </ng-template>

  <ng-template
    #selectField
    let-fieldDefinition
  >
    @if (tenantPolicies && tenantPolicies.length > 0) {
      <c8y-form-group>
        <label>{{ fieldDefinition.label | translate }}</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            title="{{ fieldDefinition.label | translate }}"
            name="tenantPolicy"
            (change)="onTenantPolicyChange()"
            formControlName="tenantPolicy"
            [attr.data-cy]="'c8y-tenant-form--' + fieldDefinition.id"
          >
            @for (tenantPolicy of tenantPolicies; track tenantPolicy) {
              <option [ngValue]="tenantPolicy">
                {{ tenantPolicy.name }}
              </option>
            }
          </select>
          <span></span>
        </div>
      </c8y-form-group>
    }
  </ng-template>
</form>