<mat-card appearance="outlined" class="object-card object-card-hidden" *ngIf="cardData === null" [hidden]="true" layoutDirection="column">
</mat-card>
<mat-card appearance="raised" class="object-card" *ngIf="cardData" layoutDirection="column" [style.border]="cardData.header.border">
  <a *ngIf="cardData.detailsLink.enabled; else objectCardTpl" class="obj-card-link"
    [routerLink]="cardData.detailsLink.url" [queryParams]="cardData.detailsLink.queryParams">
    <ng-container *ngTemplateOutlet="objectCardTpl"></ng-container>
  </a>

  <ng-template #objectCardTpl>
    <app-status-line *ngIf="cardData.header.status" [type]="cardData.header.status.type | lineType"
                     [color]="cardData.header.status.value | lineColor">
    </app-status-line>
    <mat-card-header class="object-card-header" layoutDirection="column">
      <div *ngIf="cardData.header.icon" mat-card-avatar
           [class.push-mat-avatar]="!!cardData.header.title.subText && !cardData.header.icon.gravatarEmail && !cardData.header.icon.clientAvatar">
        <app-icon *ngIf="!cardData.header.icon.gravatarEmail && !cardData.header.icon.clientAvatar"
                  class="object-card-header-icon" [icon]="cardData.header.icon"></app-icon>
        <app-gravatar *ngIf="cardData.header.icon.gravatarEmail"
                      [email]="cardData.header.icon.gravatarEmail" [customStyle]="{width: '45px'}">
        </app-gravatar>
        <app-client-avatar *ngIf="cardData && cardData.header && cardData.header.icon &&
        cardData.header.icon.clientAvatar" [client]="cardData.header.icon.clientAvatar" [bigSquare]="true">
        </app-client-avatar>
      </div>
      <mat-card-title class="object-card-title" [title]="cardData.header.title?.textTitle || cardData.header.title.text">
        <span class="fl-ellipsis-text"
              [class.fl-bold]="cardData.header.title.textBold"
              *ngIf="!cardData.header.title.textAsHtml">{{cardData.header.title.text}}</span>
        <span class="fl-ellipsis-text"
              [class.fl-bold]="cardData.header.title.textBold"
              *ngIf="cardData.header.title.textAsHtml" [innerHTML]="cardData.header.title.text"></span>
      </mat-card-title>
      <mat-card-subtitle [class.limit-subtitle]="cardData.header.icon" layoutDirection="column">
        <div>
          <span [class.fl-ellipsis-text]="!!!cardData.header.title.subTextIcon">
            {{cardData.header.title.subText}}
            <app-icon *ngIf="cardData.header.title.subTextIcon" class="subtext-icon"
                      [attr.fl-tooltip]="cardData.header.title.subTextIconTooltip"
                      [icon]="cardData.header.title.subTextIcon"></app-icon>
          </span>
        </div>
        <div class="object-tags" layoutDirection="row" appLayoutGap="5px">
          <span *ngFor="let tag of cardData.header.tags" class="fl-tag">
            {{tag}}
          </span>
        </div>
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content class="object-card-content fl-margin-right-small" layoutDirection="column">
      <div *ngIf="cardData.fields.length > 0"
           [attr.fl-tooltip]="cardData.contentTooltip" fl-tooltip-long-content>
        <div *ngFor="let field of cardData.fields" [class.fl-ellipsis-text]="!!!cardData.wrapContent">
          <span *ngIf="field.name">{{field.name}}: </span>
          <ng-container *ngIf="field.url; else noLink">
            <a *ngIf="!field.url.startsWith('http')" class="active-link field-link" [routerLink]="[field.url]">
              <span [classList]="field.valueTextAdditionalClasses"
                    [title]="field.title ? field.title : ''">{{field.value}}</span>
            </a>
            <a *ngIf="field.url.startsWith('http')" class="active-link field-link" [href]="field.url">
              <span [classList]="field.valueTextAdditionalClasses"
                    [title]="field.title ? field.title : ''">{{field.value}}</span>
            </a>
          </ng-container>
          <ng-template #noLink>
            <span [classList]="field.valueTextAdditionalClasses"
                  [title]="field.title ? field.title : ''">{{field.value}}</span>
          </ng-template>
        </div>
      </div>
    </mat-card-content>
  </ng-template>
  <mat-card-actions class="object-card-actions" [class.expand-object-card-actions]="buttons && buttons.length">
    <app-object-actions *ngIf="cardData.actions" [objectActions]="cardData.actions" [maxVisibleActions]="4">
    </app-object-actions>
    <div *ngIf="buttons" class="fl-block full-width">
      <button *ngFor="let button of buttons" mat-button class="mat-primary full-width"
              (click)="button.click()">
        {{button.text}}
      </button>
    </div>
  </mat-card-actions>
</mat-card>
