<ng-container>
  <div class="card-header bg-inherit separator sticky-top">
    <h1
      class="card-title p-t-4 p-b-4"
      ngNonBindable
      translate
      [translateParams]="{
        label: assetType?.c8y_JsonSchema?.title || assetType?.label || '' | translate
      }"
    >
      {{ label }} properties
    </h1>
  </div>
  <div class="card-block">
    @if (isLoading) {
      <div class="text-center">
        <c8y-loading></c8y-loading>
      </div>
    }

    @if (!isLoading) {
      @for (prop of customProperties; track prop.key) {
        <div
          class="card m-b-8"
          title="{{ prop.description | translate }}"
          [ngClass]="{ 'card-highlight': prop.isEdit }"
        >
          <div
            class="card-block"
            [ngClass]="{ 'p-b-0': prop.isEdit }"
          >
            @if (!prop.isEdit) {
              <div class="d-flex p-b-8 a-i-center">
                <p
                  class="text-medium text-truncate"
                  title="{{ prop?.label | translate }}"
                >
                  {{ prop?.label | translate }}
                </p>
                <button
                  class="btn btn-dot m-l-auto text-12"
                  [attr.aria-label]="'Edit' | translate"
                  tooltip="{{ 'Edit' | translate }}"
                  type="button"
                  [delay]="500"
                  (click)="toggleEdit(prop)"
                >
                  <i c8yIcon="pencil"></i>
                </button>
              </div>
            }
            <c8y-asset-properties-item
              #assetProps
              [file]="prop.file"
              [key]="prop.key"
              [type]="prop.type"
              [value]="prop.value"
              [complex]="prop.complex"
              [isEdit]="prop.isEdit"
              [jsonSchema]="prop.jsonSchema"
            ></c8y-asset-properties-item>
            @if (prop.key === POSITION_PROPERTY_KEY) {
              <div>
                <c8y-asset-location
                  [locationMO]="asset"
                  [isEdit]="prop.isEdit"
                  [form]="assetProps.form"
                ></c8y-asset-location>
              </div>
            }
          </div>
          @if (prop.isEdit) {
            <div class="card-footer p-t-0">
              <button
                class="btn btn-default btn-sm"
                title="{{ 'Cancel' | translate }}"
                type="button"
                (click)="toggleEdit(prop)"
              >
                {{ 'Cancel' | translate }}
              </button>
              <button
                class="btn btn-primary btn-sm"
                title="{{ 'Save' | translate }}"
                type="button"
                [disabled]="!assetProps?.form?.valid || !assetProps?.form?.dirty"
                (click)="save(assetProps.form.value, prop)"
              >
                {{ 'Save' | translate }}
              </button>
            </div>
          }
        </div>
      }
    }
  </div>
</ng-container>