<div class="card-block p-t-0 flex-no-shrink separator-bottom col-xs-12">
  <div class="flex-row p-b-8 p-t-4 j-c-center">
    <div>
      <h4 class="text-center text-normal">{{ header | translate }}</h4>
      <p *ngIf="name || description" class="text-center p-t-16 p-b-8 text-truncate">
        <strong *ngIf="name" [title]="name">{{ name }}</strong
        ><br />
        <small *ngIf="description" [title]="description">{{ description }}</small>
      </p>
      <p class="text-center" *ngIf="showType">
        <span class="label label-primary" *ngIf="type; else noType">
          {{ type }}
        </span>
        <ng-template #noType>
          <span class="label label-default">
            {{ 'Undefined' | translate }}
          </span>
        </ng-template>
      </p>
    </div>
  </div>
</div>
<div *ngIf="previewBlocks?.length" class="col-xs-12 flex-grow no-gutter">
  <div class="card-inner-scroll fit-h">
    <div class="card-block">
      <ng-container *ngFor="let block of previewBlocks">
        <div *ngIf="block.show" class="flex-row p-b-8 j-c-center">
          <div class="col-xs-12 col-sm-6">
            <div class="text-truncate" [title]="block.label | translate">
              <span class="legend form-block">{{ block.label | translate }}</span>
              <ng-container *ngTemplateOutlet="block.templateRef"></ng-container>
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</div>
<div [style.display]="listRef?.nativeElement?.children?.length ? 'contents' : 'none'">
  <div class="col-xs-12 flex-grow no-gutter">
    <div class="card-inner-scroll fit-h">
      <div #list class="card-block p-t-0 p-b-0">
        <ng-content select="[list]"> </ng-content>
      </div>
    </div>
  </div>
</div>