<sm-model-menu #contextMenu *smCheckPermission="true"
               [model]="contextModel"
               [selectedModel]="selectedModel"
               [selectedModels]="selectedModels"
               [selectedDisableAvailable]="selectedModelsDisableAvailable"
               [numSelected]="selectedModels.length"
               [tagsFilterByProject]="tagsFilterByProject$ | async"
               [projectTags]="projectTags$ | async"
               [companyTags]="companyTags$ | async"
               (tagSelected)="addTag($event)"
               (menuOpened)="setContextMenuStatus(true)"
               (menuClosed)="setContextMenuStatus(false)"
               [showButton]="false"
></sm-model-menu>
<div class="table-container" [class.card-view]="minimizedView">
  <sm-table
    [selectionMode]="selectionMode"
    [tableData]="models"
    [noMoreData]="noMoreModels"
    [resizableColumns]="true"
    [columns]="tableCols"
    [reorderableColumns]="true"
    [columnsOrder]="colsOrder"
    [lazyLoading]="true"
    [selection]="selectedModel"
    [checkedItems]="selectedModels"
    [activeContextRow]="contextModel"
    [contextMenuOpen]="contextMenuActive"
    [minimizedView]="minimizedView"
    [minimizedTableHeader]="'MODEL LIST'"
    [sortFields]="tableSortFields"
    (colReordered)="columnsReordered($event)"
    [keyboardControl]="true"
    (rowSelectionChanged)="onRowSelectionChanged($event)"
    (loadMoreClicked)="onLoadMoreClicked()"
    (onRowRightClick)="openContextMenu($event)"
    (sortChanged)="onSortChanged($event.isShift, $event.field)"
  >
    <ng-template let-col pTemplate="cardFilter">
      <sm-table-card-filter-template [options]="MODELS_ALL_FILTER_OPTIONS"
                                     [value]="filtersValues"
                                     [subValue]="filtersSubValues[MODELS_TABLE_COL_FIELDS.TAGS]"
                                     [columns]="initialColumns"
                                     fixedOptionsSubheader="System tags"
                                     (subFilterChanged)="tableFilterChanged({id:'system_tags'}, $event)"
                                     (filterChanged)="tableAllFiltersChanged($event)"
                                     (menuClosed)="sortOptionalUsersList()"
                                     (menuOpened)="tagsMenuOpened.emit()"
      ></sm-table-card-filter-template>
    </ng-template>
    <!--CHECKBOX TEMPLATE-->
    <ng-template let-col pTemplate="checkbox">
      <sm-checkbox-control *ngIf="col.id === MODELS_TABLE_COL_FIELDS.SELECTED"
                           class="checkbox-col header"
                           fieldName="selected"
                           [formData]="selectionState"
                           (formDataChanged)="headerCheckboxClicked()"
                           inputClassName="table-check-box select-col-checkbox">
      </sm-checkbox-control>
    </ng-template>

    <!--SORT FILTER TEMPLATE-->

    <ng-template let-col pTemplate="sort-filter">
      <sm-table-filter-sort-template
        [column]="col"
        [value]="filtersValues[col.id]"
        [searchValue]="searchValues[col.id]"
        [options]="MODELS_ALL_FILTER_OPTIONS[col.id] | filter:searchValues[col.id]:'label'"
        [sortOrder]="tableSortFieldsObject[col.id]"
        (sortOrderChanged)="onSortChanged($event, col.id)"
        (filterChanged)="tableFilterChanged(col, $event);"
        (searchValueChanged)="searchValueChanged($event, col.id)"
        (menuClosed)="filterMenuClosed(col.id)"
        [fixedOptionsSubheader]="col.id === MODELS_ALL_FILTER_OPTIONS.TAGS ? 'System tags' : ''"
        (menuOpened)="col.id === MODELS_ALL_FILTER_OPTIONS.TAGS && tagsMenuOpened.emit()"
      >
      </sm-table-filter-sort-template>
    </ng-template>

    <!--BODY TEMPLATE-->

    <ng-template let-col
                 let-model="rowData"
                 pTemplate="body">
      <ng-container [ngSwitch]="col.id">
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.NAME">
          <div class="d-flex flex-row flex-nowrap">
            <div class="model-name" matTooltipPosition="above" [smTooltip]="model.name">{{model.name}}</div>
            <i *ngIf="model?.system_tags.includes('shared')" class="fas fa-link p-1 ml-1"></i>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.TAGS">
          <sm-tag-list [tags]="model.tags" [sysTags]="getSysTags(model)"></sm-tag-list>
        </ng-container>
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.USER">
          {{model.user?.name ? model.user?.name : 'Unknown User'}}
        </ng-container>
        <span matTooltipPosition="above" [smTooltip]="model?.project?.name" *ngSwitchCase="MODELS_TABLE_COL_FIELDS.PROJECT">
          {{model?.project?.name}}
        </span>
        <span *ngSwitchCase="MODELS_TABLE_COL_FIELDS.TASK" matTooltipPosition="above" [smTooltip]="model.task?.name">
          {{model.task?.name}}
        </span>
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.READY">
          <sm-experiment-status-icon-label [status]="model?.ready? 'published': 'created'"></sm-experiment-status-icon-label>
        </ng-container>
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.CREATED">
          <span matTooltipPosition="above" [smTooltip]="model.created | date : TIME_FORMAT_STRING">{{model.created | timeAgo}}</span>
        </ng-container>
        <sm-checkbox-control
          *ngSwitchCase="MODELS_TABLE_COL_FIELDS.SELECTED"
          smClickStopPropagation
          class="checkbox-col"
          fieldName="selected"
          [formData]="isRowSelected(model)"
          (formDataChanged)="rowSelectedChanged($event, model)"
          inputClassName="table-check-box table-body">
        </sm-checkbox-control>
        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.COMMENT">
          <span matTooltipPosition="above" [smTooltip]="model.comment">{{model.comment}}</span>
        </ng-container>
        <ng-container *ngSwitchDefault>
          {{model[col.id]}}
        </ng-container>
      </ng-container>
    </ng-template>

    <ng-template let-model="rowData" let-selected="selected" let-rowNumber="rowNumber" pTemplate="card">
      <sm-table-card [selected]="selected"
                     [rowNumber]="rowNumber"
                     [cardName]="model.name"
                     [columns]="tableCols"
                     [rowData]="model"
                     [checked]="isRowSelected(model)"
                     [activeContextRow]="contextModel"
                     [contextMenuOpen]="contextMenuActive"
      >
        <div sm-name-icon><i *ngIf="model?.system_tags.includes('shared')" class="fas fa-link p-1 ml-1"></i></div>
        <sm-tag-list class="mb-1" [sysTags]="getSysTags(model)" [tags]="model?.tags"></sm-tag-list>
        <div  class="ellipsis compact-columns-data" compact-columns-data>Created {{model.created | timeAgo}} by {{model.user?.name || 'Unknown User'}}
          <ng-container *ngIf="model.task"><BR>{{model.task.name}}</ng-container>
        </div>
        <sm-experiment-status-icon-label
          [status]="model?.ready? 'published': 'created'"></sm-experiment-status-icon-label>
        <sm-checkbox-control fieldName="selected" [formData]="isRowSelected(model)"
                             (formDataChanged)="rowSelectedChanged($event, model)"
                             [inputClassName]="'table-check-box table-body' + (selected ? ' row-selected' : '')"></sm-checkbox-control>
      </sm-table-card>
    </ng-template>
  </sm-table>
</div>
