<c8y-title *ngIf="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>
        <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 *ngIf="fieldDefinitions[key].type === 'select'">
              <ng-container
                *ngTemplateOutlet="selectField; context: { $implicit: fieldDefinitions[key] }"
              ></ng-container>
            </ng-container>
          </ng-container>
        </div>
      </div>
    </div>
    <div
      class="inner-scroll bg-level-1"
      *ngIf="!isNew && tenant"
    >
      <c8y-support-user-access [tenant]="tenant"></c8y-support-user-access>
    </div>

    <!-- FOOTER CARD -->
    <div
      class="card-footer separator large-padding grid__col--fullspan"
      *ngIf="initialized"
    >
      <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"
        />
        <span
          class="input-group-addon"
          *ngIf="fieldDefinition.id === 'domain' && host && isNew"
        >
          {{ 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>
    <form
      #passwordForm="ngForm"
      *ngIf="showPasswordComponent && fieldDefinition.id === 'sendPasswordResetEmail'"
    >
      <c8y-new-password
        [showChangePasswordButton]="false"
        [requireStrongPassword]="passwordStrengthEnforced"
        (password)="onNewPasswordChanged($event)"
      ></c8y-new-password>
    </form>
  </ng-template>

  <ng-template
    #selectField
    let-fieldDefinition
  >
    <c8y-form-group *ngIf="tenantPolicies && tenantPolicies.length > 0">
      <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"
        >
          <option
            *ngFor="let tenantPolicy of tenantPolicies"
            [ngValue]="tenantPolicy"
          >
            {{ tenantPolicy.name }}
          </option>
        </select>
        <span></span>
      </div>
    </c8y-form-group>
  </ng-template>
</form>