@if (!isEdit) {
  @switch (type) {
    @case ('date') {
      {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}
    }
    @case ('file') {
      @if (file) {
        @if (previewImage) {
          <img
            class="img-responsive"
            [src]="previewImage"
          />
        }
        @if (!previewImage) {
          <button
            class="btn btn-clean text-truncate p-0"
            title="{{ 'Download' | translate }} {{ file.name }}"
            type="button"
            (click)="filesService.download(file)"
          >
            {{ file.name }}
          </button>
        }
      } @else {
        {{ 'No file attached.' | translate }}
      }
    }
    @case ('object') {
      <ul class="list-unstyled c8y-custom-properties">
        @for (prop of complex; track prop.key; let i = $index) {
          <li
            class="p-t-4 p-b-4 d-flex text-nowrap"
            [ngClass]="{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }"
          >
            <label
              class="small m-b-0 m-r-8 text-truncate"
              title="{{ prop.label | translate }}"
              [ngClass]="{ 'a-s-start': prop.file }"
            >
              {{ prop.label | translate }}
            </label>
            <span
              class="m-l-auto"
              [ngStyle]="{
                'max-width': prop.file ? '50%' : '100%',
                'min-width': '0'
              }"
            >
              <c8y-asset-properties-item
                [file]="prop.file"
                [key]="prop.key"
                [type]="prop.type"
                [value]="prop.value"
              ></c8y-asset-properties-item>
            </span>
          </li>
        }
      </ul>
    }
    @case (type === 'number' || type === 'boolean' ? type : '') {
      <p
        class="text-truncate"
        title="{{ value != null ? value : ('Undefined' | translate) }}"
      >
        {{ value != null ? value : ('Undefined' | translate) }}
      </p>
    }
    @default {
      <p
        class="text-truncate"
        title="{{ (value | translate) || ('Undefined' | translate) }}"
      >
        {{ (value | translate) || ('Undefined' | translate) }}
      </p>
    }
  }
}
@if (isEdit) {
  <formly-form
    [form]="form"
    [fields]="fields"
    [model]="model"
  ></formly-form>
}