<c8y-title *ngIf="tenant">
  {{ 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>

<ng-container>
  <form
    [formGroup]="customPropsForm"
    (ngSubmit)="onSubmit()"
  >
    <div class="card card--fullpage m-b-0">
      <div class="card-header separator">
        <div
          class="card-title"
          translate
        >
          Custom properties
        </div>
      </div>

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

        <c8y-help src="/docs/enterprise-tenant/managing-tenants/#custom-properties"></c8y-help>

        <!-- empty state -->
        <c8y-ui-empty-state
          [icon]="'property-script'"
          [title]="'No custom properties to display.' | translate"
          [subtitle]="'Add a new tenant property in Properties library.' | translate"
          *ngIf="fieldDefinitions?.length === 0 && initialized"
        >
          <p c8y-guide-docs>
            <small translate>
              Find out more in the
              <a c8y-guide-href="/docs/enterprise-tenant/managing-tenants/#custom-properties">
                User guide
              </a>
              .
            </small>
          </p>
        </c8y-ui-empty-state>

        <div
          class="card-block"
          *ngIf="initialized"
        >
          <ng-container *ngFor="let field of fieldDefinitions">
            <c8y-custom-property-field
              [fieldDefinition]="field"
              [form]="customPropsForm"
            ></c8y-custom-property-field>
          </ng-container>
        </div>
      </div>

      <div
        class="card-footer separator"
        *ngIf="initialized"
      >
        <button
          class="btn btn-default"
          type="button"
          [routerLink]="['/tenants']"
          translate
          data-cy="custom-properties--cancel-button"
        >
          Cancel
        </button>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!(!customPropsForm.invalid && customPropsForm.dirty)"
          translate
          data-cy="custom-properties--save-button"
        >
          Save
        </button>
      </div>
    </div>
  </form>
</ng-container>