<ng-container [ngSwitch]="type" *ngIf="!isEdit">
  <ng-container *ngSwitchCase="'date'">
    {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}
  </ng-container>
  <ng-container *ngSwitchCase="'file'">
    <ng-container *ngIf="file">
      <img *ngIf="previewImage" [src]="previewImage" class="img-responsive" />
      <button
        *ngIf="!previewImage"
        (click)="filesService.download(file)"
        type="button"
        title="{{ 'Download' | translate }} {{ file.name }}"
        class="btn btn-clean text-truncate p-0"
      >
        {{ file.name }}
      </button>
    </ng-container>
    <ng-container *ngIf="!file">
      {{ 'No file attached.' | translate }}
    </ng-container>
  </ng-container>
  <ng-container *ngSwitchCase="'object'">
    <ul class="list-unstyled c8y-custom-properties">
      <li
        *ngFor="let prop of complex; let i = index"
        [ngClass]="{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }"
        class="p-t-4 p-b-4 d-flex text-nowrap"
      >
        <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" style="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>
  </ng-container>
  <!--
  <ng-container *ngSwitchCase="'boolean'">
      <input type="checkbox" [checked]="value" [disabled]="true" />
    </ng-container>
  -->
  <ng-container *ngSwitchCase="type === 'number' || type === 'boolean' ? type : ''">
    <p class="text-truncate" title="{{ value != null ? value : ('Undefined' | translate) }}">
      {{ value != null ? value : ('Undefined' | translate) }}
    </p>
  </ng-container>
  <ng-container *ngSwitchDefault>
    <p class="text-truncate" title="{{ (value | translate) || ('Undefined' | translate) }}">
      {{ (value | translate) || ('Undefined' | translate) }}
    </p>
  </ng-container>
</ng-container>
<formly-form *ngIf="isEdit" [form]="form" [fields]="fields" [model]="model"></formly-form>