clarin-item-box-view.component.html

<div class="pt-3" *ngIf="item != null">
  <div class="card">
    <div class="card-body pt-0 pb-0">
      <div *ngVar="hasItemType() as nonEmptyItemType" [ngClass]="{'row': true, 'justify-content-between': nonEmptyItemType, 'justify-content-end': !nonEmptyItemType}">
        <span *ngIf="nonEmptyItemType" class="item-type">{{ itemType }}</span>
        <span class="label item-community"><a class="pt-2" [href]="communitySearchRedirect | async">{{ (itemCommunity | async)?.name }}</a></span>
      </div>
      <div class="pl-3">
        <div class="row pt-3 justify-content-between">
          <div class="col-10 pl-0">
            <div><a [routerLink]="itemUri" class="item-name">{{ itemName }}</a></div>
            <div *ngIf="isSearchResult" class="pt-1">
              <div class="font-weight-bold">{{ 'item.view.box.publisher.message' | translate }}</div>
              <span>(<span *ngIf="itemPublisher != null"><a [href]="publisherRedirectLink">{{itemPublisher}}</a> / </span>{{itemDate}})</span>
            </div>
          </div>
          <div class="col-2 d-flex justify-content-end">
            <img class="artifact-icon"
                 [src]="ITEM_TYPE_IMAGES_PATH + itemType + '.png'"
                 (error)="handleImageError($event)">
          </div>
        </div>
        <div class="row pt-1">
          <strong>{{'item.view.box.author.message' | translate}}</strong>
        </div>
        <div class="row">
          <ds-clarin-item-author-preview [item]="item" [fields]="AUTHOR_METADATA_FIELDS"></ds-clarin-item-author-preview>
        </div>
        <div *ngIf="isSearchResult === false && itemDescription != null" class="row d-block pt-1">
          <div><strong>{{'item.view.box.description.message' | translate}}</strong></div>
          <div class="clarin-item-description pr-3">{{itemDescription}}</div>
        </div>
        <div class="row d-flex pt-1">
          <div class="label label-info label-icon"><i class="fas fa-paperclip fa-sm"></i></div>
          <div *ngIf="hasMoreFiles()" class="label label-info"> {{'item.view.box.files.message.0' | translate}} {{ (itemCountOfFiles | async) }} {{'item.view.box.files.message.1' | translate}} ({{(itemFilesSizeBytes | async) | dsFileSize }}). </div>
          <div *ngIf="(itemCountOfFiles | async) === 1" class="label label-info"> {{'item.view.box.one.file.message' | translate}} ({{(itemFilesSizeBytes | async) | dsFileSize }}). </div>
          <div *ngIf="(itemCountOfFiles | async) === -1" class="label label-info"> {{'item.view.box.no-files.message' | translate}}</div>
        </div>
      </div>
      <div [ngClass]="{'row': true, 'justify-content-end': true, 'pt-3': (itemCountOfFiles | async) === -1}">
        <div *ngIf="licenseType != null"
             [ngClass]="'d-inline py-1 px-1 label label-license  label-default' + ' label-' + licenseLabel + ' rounded text-white'">
          <span>
            {{licenseType }}
          </span>
          <div class="d-inline" *ngFor="let lli of (licenseLabelIcons | async)">
            <img [ngClass]="{'clarin-license-icon-mr':licenseLabelIcons.value.length > 1}"
                 [src]="secureImageData(lli?.icon)"
                 [ngbTooltip]="lli?.title"
                 triggers="mouseenter:mouseleave"
                 placement="bottom"
                 alt="" width="16px">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>