<div class="no-objects-message-container" *ngIf="tableData && !tableData.rows.length">
  <span [class.no-objects-message]="insideCard === false" [style.top]="noObjectsTopOffset">
    {{objectsListController.objectListUIService.noItemsMessage || noItemsTxt}}
  </span>
</div>
<div class="table-wrapper table-wrapper-extra"
     *ngIf="tableData && tableData.rows.length">
  <table mat-table matSort [dataSource]="tableDataSource" [trackBy]="tableData.trackByFunction" multiTemplateDataRows
         matSortActive="{{activeSort?.active}}" matSortDirection="{{activeSort?.direction}}"
         [matSortDisableClear]="true"
         (matSortChange)="sort($event)" layoutDirection="column"
         [class.mat-elevation-z2]="insideCard === false">
    <ng-container *ngFor="let column of tableData.header.columns; let last=last"
                  matColumnDef="{{column.fieldName}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!column.enableSort"
          class="table-header-cell"
          [class.padding-right]="!last"
          [class.currency-col]="column.type === ColumnType.Currency"
          [appFlex]="column.flex"
          [xsFlex]="column.flexXs"
          [class.hide-xs]="!!column.hide['xs']"
          [class.hide-sm]="!!column.hide['sm']"
          [class.hide-md]="!!column.hide['md']"
          [class.hide-lg]="!!column.hide['lg']"
          [class.hide-lt-sm]="!!column.hide['lt-sm']"
          [class.hide-lt-md]="!!column.hide['lt-md']"
          [class.hide-lt-lg]="!!column.hide['lt-lg']"
          [class.hide-lt-xl]="!!column.hide['lt-xl']">
        <span *ngIf="column.type === ColumnType.Value || column.type === ColumnType.Image
        || column.type === ColumnType.Currency">
          {{column.displayName || ''}}
        </span>
      </th>
      <td mat-cell *matCellDef="let row" class="table-cell"
          [class.table-cell-image]="column.type === ColumnType.Image"
          [class.padding-right]="!last"
          [appFlex]="column.flex"
          [xsFlex]="column.flexXs"
          [attr.layoutAlign]="column.type === ColumnType.Actions ? 'end center': 'start center'"
          [class.hide-xs]="!!column.hide['xs']"
          [class.hide-sm]="!!column.hide['sm']"
          [class.hide-md]="!!column.hide['md']"
          [class.hide-lg]="!!column.hide['lg']"
          [class.hide-lt-sm]="!!column.hide['lt-sm']"
          [class.hide-lt-md]="!!column.hide['lt-md']"
          [class.hide-lt-lg]="!!column.hide['lt-lg']"
          [class.hide-lt-xl]="!!column.hide['lt-xl']"
          [class.table-cell-actions-selector]="column.type === ColumnType.Actions && row.actions"
          [class.fl-bold]="row.boldText"
          (click)="toggleRowDetails(row, column)">
        <span *ngIf="column.type === ColumnType.Status && row.expandable" class="arrow-container">
          <mat-icon class="vertical-align-middle">
            {{(row.object.id === expandedObjectId || (expandedRows && expandedRows[row.showsRows])) ? 'arrow_drop_down' : 'arrow_right'}}
          </mat-icon>
        </span>
        <a *ngIf="(column.type === ColumnType.Value || column.type === ColumnType.Currency) &&
        ((row.url?.enabled && row.url?.url) || ((row.url?.url === undefined) && row.url) || row.cells[column.fieldName].url); else noLink"
           class="text-cell" [routerLink]="row.cells[column.fieldName]?.url || row.url?.url || row.url"
           [queryParams]="row.cells[column.fieldName]?.url ? null : row.url?.queryParams">
          <div *ngIf="column.type === ColumnType.Value || column.type === ColumnType.Currency"
               [style.padding-left]="row.cells[column.fieldName]?.paddingLeft ? row.cells[column.fieldName]?.paddingLeft : null"
               layoutDirection="column"
               [class.currency-col]="column.type === ColumnType.Currency">
            <div *ngIf="row.cells[column.fieldName]?.text; else noText"
                 [class.fl-ellipsis-text]="!!!column.wrap">
              <app-icon *ngIf="row.cells[column.fieldName]?.textIcon" [icon]="row.cells[column.fieldName]?.textIcon">
              </app-icon>
              <span [class.fl-green-color]="row.cells[column.fieldName].textColor === LineColor.Green"
                    [class.fl-red-color]="row.cells[column.fieldName].textColor === LineColor.Red"
                    [class.fl-orange-color]="row.cells[column.fieldName].textColor === LineColor.Orange"
                    [class.fl-gray-color]="row.cells[column.fieldName].textColor === LineColor.Gray"
                    [class.fl-bold]="row.cells[column.fieldName].textBold === true"
                    [class.fl-struck]="row.cells[column.fieldName].textStruck === true"
                    [title]="row.cells[column.fieldName].title ? row.cells[column.fieldName].title: row.cells[column.fieldName].text"
                    *ngIf="!column.displayAsHtml; else displayAsHtml">
                {{row.cells[column.fieldName].text}}
              </span>
              <ng-template #displayAsHtml>
                <span [class.fl-green-color]="row.cells[column.fieldName].textColor === LineColor.Green"
                      [class.fl-red-color]="row.cells[column.fieldName].textColor === LineColor.Red"
                      [class.fl-orange-color]="row.cells[column.fieldName].textColor === LineColor.Orange"
                      [class.fl-gray-color]="row.cells[column.fieldName].textColor === LineColor.Gray"
                      [class.fl-bold]="row.cells[column.fieldName].textBold === true"
                      [class.fl-struck]="row.cells[column.fieldName].textStruck === true"
                      [title]="row.cells[column.fieldName].title ? row.cells[column.fieldName].title : row.cells[column.fieldName].text"
                      [innerHTML]="row.cells[column.fieldName].text"></span>
              </ng-template>
            </div>
            <ng-template #noText>
              <span *ngIf="!row.cells[column.fieldName]?.tags && !row.cells[column.fieldName]?.subtext">
                &nbsp;<!-- this ensure link works on cells with no text-->
              </span>
            </ng-template>
            <div *ngIf="row.cells[column.fieldName]?.subText" class="fl-ellipsis-text">
              <span *ngIf="!row.cells[column.fieldName].subTextLink"
                    [title]="row.cells[column.fieldName].subTextTitle ? row.cells[column.fieldName].subTextTitle : ''"
                    class="sub-text">
                {{row.cells[column.fieldName].subText}}
              </span>
              <a *ngIf="row.cells[column.fieldName]?.subTextLink"
                 [title]="row.cells[column.fieldName].subTextTitle ? row.cells[column.fieldName].subTextTitle : ''"
                 class="sub-text sub-text-with-link active-link"
                 [routerLink]="row.cells[column.fieldName].subTextLink" (click)="$event.stopPropagation()">
                {{row.cells[column.fieldName].subText}}
              </a>
            </div>
            <div *ngIf="row.cells[column.fieldName]?.tags" layoutDirection="row" appLayoutGap="5px">
              <span *ngFor="let tag of row.cells[column.fieldName].tags" class="fl-tag" translate>
                {{tag}}
              </span>
            </div>
          </div>
        </a>
        <ng-template #noLink>
          <div *ngIf="column.type === ColumnType.Value || column.type === ColumnType.Currency"
               [class.currency-col]="column.type === ColumnType.Currency"
               layoutDirection="column" class="text-cell">
            <div [class.fl-ellipsis-text]="!!!column.wrap">
              <span [class.fl-green-color]="row.cells[column.fieldName].textColor === LineColor.Green"
                    [class.fl-red-color]="row.cells[column.fieldName].textColor === LineColor.Red"
                    [class.fl-orange-color]="row.cells[column.fieldName].textColor === LineColor.Orange"
                    [class.fl-gray-color]="row.cells[column.fieldName].textColor === LineColor.Gray"
                    [title]="row.cells[column.fieldName].title ? row.cells[column.fieldName].title: row.cells[column.fieldName].text"
                    [class.fl-bold]="row.cells[column.fieldName].textBold === true"
                    [class.fl-struck]="row.cells[column.fieldName].textStruck === true">
                {{row.cells[column.fieldName].text}}
              </span>
            </div>
            <div *ngIf="row.cells[column.fieldName]?.subText" class="fl-ellipsis-text">
              <span *ngIf="!row.cells[column.fieldName].subTextLink"
                    [title]="row.cells[column.fieldName].subTextTitle ? row.cells[column.fieldName].subTextTitle : ''"
                    class="sub-text">
                {{row.cells[column.fieldName].subText}}
              </span>
              <a *ngIf="row.cells[column.fieldName]?.subTextLink"
                 [title]="row.cells[column.fieldName].subTextTitle ? row.cells[column.fieldName].subTextTitle : ''"
                 class="sub-text sub-text-with-link active-link"
                 [routerLink]="row.cells[column.fieldName].subTextLink">
                {{row.cells[column.fieldName].subText}}
              </a>
            </div>
            <div *ngIf="row.cells[column.fieldName]?.tags" layoutDirection="row" appLayoutGap="5px">
              <div *ngFor="let tag of row.cells[column.fieldName].tags" class="fl-tag" translate>
                {{tag}}
              </div>
            </div>
          </div>
        </ng-template>

        <div *ngIf="column.type === ColumnType.Image">
          <ng-container *ngIf="row.icon">
            <app-icon *ngIf="!row.icon.gravatarEmail && !row.icon.clientAvatar" [icon]="row.icon"></app-icon>
            <app-gravatar *ngIf="row.icon.gravatarEmail" [email]="row.icon.gravatarEmail" [customStyle]="{
              width: '24px',
              borderRadius: '100%',
              marginLeft: '5px',
              marginRight: '15px',
              verticalAlign: 'middle'
            }"></app-gravatar>
            <app-client-avatar *ngIf="row.icon.clientAvatar" [client]="row.icon.clientAvatar">
            </app-client-avatar>
          </ng-container>
        </div>

        <span *ngIf="row.status && column.type === ColumnType.Status && row.status.statusArrow"
              class="status-arrow"
              [style.position]="row.status.statusArrow.position ? row.status.statusArrow.position : null"
              [style.right]="row.status.statusArrow.right ? row.status.statusArrow.right : null"
              [class.status-arrow-down]="row.status.statusArrow.direction === 'down'"
              [class.fl-red-color]="row.status.statusArrow.color === LineColor.Red"
              [class.fl-yellow-color]="row.status.statusArrow.color === LineColor.Yellow">
          ↑
        </span>
        <app-status-line *ngIf="row.status && column.type === ColumnType.Status"
                         [direction]="LineDirection.Vertical"
                         [type]="row.status.type" [color]="row.status.value"></app-status-line>
        <app-object-actions *ngIf="column.type === ColumnType.Actions && row.actions" [objectActions]="row.actions"
                            [maxVisibleActions]="visibleActions"></app-object-actions>
      </td>
    </ng-container>

    <ng-container *ngIf="tableData.expandableRows" matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let row" [attr.colspan]="tableData.header.columnNames.length"
          class="detail-cell">
        <div class="detail-container" [@detailExpand]="row.object.id === expandedObjectId ? 'expanded' : 'collapsed'"
             layoutDirection="row">
          <ng-template #expandedRow *ngIf="row.object.id === expandedObjectId"
                       appComponentHost [component]="tableData.detailComponent" [data]="row.detailComponentData"
                       [objectController]="expandedRowController">
          </ng-template>
        </div>
      </td>
    </ng-container>

    <ng-container *ngIf="!tableData.header.hideHeader">
      <tr mat-header-row class="fl-header-row" *matHeaderRowDef="tableData.header.columnNames"
          [class.always-show-actions]="tableData.alwaysShowActions"></tr>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: tableData.header.columnNames;"
        class="main-row"
        [style.border]="row.border"
        (click)="expandMoreRows(row)"
        [class.always-show-actions]="tableData.alwaysShowActions"
        [ngClass]="{
          'fl-cursor-pointer': row.expandable,
          'hide': row.rowType && (!expandedRows || !expandedRows[row.rowType]),
          'separate-list-table-row': row.separateTop === true,
          'hide-box-shadow': row.hideBoxShadow === true
        }">
    </tr>
    <ng-container *ngIf="tableData.expandableRows">
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"
          [class.always-show-actions]="tableData.alwaysShowActions"
          class="detail-row"></tr>
    </ng-container>
  </table>
</div>
