@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>

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

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

        <!-- empty state -->
        @if (fieldDefinitions?.length === 0 && initialized) {
          <c8y-ui-empty-state
            [icon]="'property-script'"
            [title]="'No custom properties to display.' | translate"
            [subtitle]="'Add a new tenant property in Properties library.' | translate"
          >
            <p c8y-guide-docs>
              <small
                translate
                ngNonBindable
              >
                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>
        }

        @if (initialized) {
          <div class="card-block">
            @for (field of fieldDefinitions; track field.id) {
              <c8y-custom-property-field
                [fieldDefinition]="field"
                [form]="customPropsForm"
              ></c8y-custom-property-field>
            }
          </div>
        }
      </div>

      @if (initialized) {
        <div class="card-footer separator">
          <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>