<p class="m-b-8" *ngIf="title">
  <i *ngIf="icon" [c8yIcon]="icon" class="text-info m-r-8"></i>
  <span class="text-label-small">{{ title | translate }}</span>
</p>
<ul class="list-unstyled small">
  <li
    class="p-t-4 p-b-4 d-flex"
    *ngFor="let prop of properties; let i = index; trackBy: identity"
    [ngClass]="{'separator-top-bottom': i === 0,
                'separator-bottom': i > 0}"
    >
    <div
      [ngClass]="{
        'm-l-16': hasGroup(prop),
        legend: prop.type === 'group',
        'form-block': prop.type === 'group',
        'm-b-0': prop.type === 'group',
        'm-t-4': prop.type === 'group'
      }"
      class="small text-medium text-nowrap m-r-4"
    >
      {{ prop.label | translate }}
    </div>
    <span [ngSwitch]="prop.type" class="m-l-auto">
      <span *ngSwitchCase="'string'" class="m-l-auto">{{ prop.value }}</span>
      <a
        *ngSwitchCase="'link'"
        (click)="prop.action($event, prop.value)"
        class="m-l-auto pointer text-truncate m-l-4"
      >{{ prop.value }}</a>
      <span *ngSwitchCase="'array'">
        <span
          class="label label-info m-l-4"
          *ngFor="let propTag of prop.value"
          (click)="prop.action && prop.action($event, propTag)"
          [ngClass]="{
            pointer: prop.action
          }"
        >{{ propTag }}</span>
      </span>
    </span>
  </li>
</ul>