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

    <ng-container *ngIf="!isLoading">
      <div
        class="card m-b-8"
        *ngFor="let prop of customProperties"
        [ngClass]="{ 'card-highlight': prop.isEdit }"
        title="{{ prop.description | translate }}"
      >
        <div class="card-block " [ngClass]="{'p-b-0': prop.isEdit}">
          <div class="d-flex p-b-8" *ngIf="!prop.isEdit">
            <p class="text-medium">{{ prop?.label | humanize }}</p>
            <button
              class="btn btn-clean text-primary m-l-auto text-12"
              title="{{ 'Edit' | translate }}"
              (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>
        </div>
        <div class="card-footer p-t-0" *ngIf="prop.isEdit">
          <button type="button" class="btn btn-default btn-sm" translate (click)="toggleEdit(prop)">
            Cancel
          </button>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            translate
            [disabled]="!assetProps?.form?.valid"
            (click)="save(assetProps.model, prop)"
          >
            Save
          </button>
        </div>
      </div>
    </ng-container>
  </div>
</ng-container>