<sm-model-menu-extended
  #contextMenuExtended
  [model]="contextModel"
  [tableMode]="!minimizedView"
  [selectedModel]="selectedModel"
  [selectedModels]="singleRowContext ? (selectedModel? [selectedModel] : undefined ): selectedModels"
  [selectedDisableAvailableIsMultiple]="!singleRowContext"
  [selectedDisableAvailable]="singleRowContext ? getSingleSelectedModelsDisableAvailable(selectedModel? selectedModel: contextModel) : selectedModelsDisableAvailable"
  [numSelected]="singleRowContext ? 1 : selectedModels.length"
  [tagsFilterByProject]="tagsFilterByProject$ | async"
  [projectTags]="projectTags$ | async"
  [companyTags]="companyTags$ | async"
  [showButton]="false"
  [backdrop]="menuBackdrop"
  (tagSelected)="addTag($event)"
  (menuOpened)="setContextMenuStatus(true)"
  (menuClosed)="setContextMenuStatus(false)"
></sm-model-menu-extended>
<div class="table-container" [class.card-view]="minimizedView">
  <sm-table
    [initialColumns]="initialColumns"
    [selectionMode]="selectionMode"
    [tableData]="models"
    [noMoreData]="noMoreModels"
    [resizableColumns]="enableMultiSelect"
    [columns]="tableCols"
    [reorderableColumns]="enableMultiSelect"
    [columnsOrder]="colsOrder"
    [lazyLoading]="true"
    [selection]="selectedModel"
    [checkedItems]="selectedModels"
    [activeContextRow]="contextModel"
    [contextMenuOpen]="contextMenuActive"
    [minimizedView]="minimizedView"
    [minimizedTableHeader]="'MODEL LIST'"
    [sortFields]="tableSortFields"
    [keyboardControl]="true"
    (colReordered)="columnsReordered.emit($event)"
    (rowSelectionChanged)="onRowSelectionChanged($event)"
    (rowClicked)="tableRowClicked($event)"
    (loadMoreClicked)="onLoadMoreClicked()"
    (rowRightClick)="openContextMenu($event)"
    (sortChanged)="onSortChanged($event.isShift, $event.field)"
    (columnResized)="columnResized.emit($event)"
  >
    <ng-template let-col pTemplate="cardFilter">
      <sm-table-card-filter-template [options]="filtersOptions"
                                     [value]="filtersValues"
                                     [subValue]="filtersSubValues[MODELS_TABLE_COL_FIELDS.TAGS]"
                                     [columns]="initialColumns"
                                     [filterMatch]="filtersMatch"
                                     fixedOptionsSubheader="System tags"
                                     (subFilterChanged)="tableFilterChanged({id:'system_tags'}, $event)"
                                     (filterChanged)="tableAllFiltersChanged($event)"
                                     (menuOpened)="columnFilterOpened($event)"
                                     (menuClosed)="columnFilterClosed($event)"
      ></sm-table-card-filter-template>
    </ng-template>
    <!--CHECKBOX TEMPLATE-->
    <ng-template let-col pTemplate="checkbox">
      <div class="d-flex align-items-center">
        <sm-checkbox-control
          *ngIf="col.id === MODELS_TABLE_COL_FIELDS.SELECTED"
          class="checkbox-col header"
          [class.minimised]="minimizedView"
          fieldName="selected"
          [formData]="selectionState"
          (formDataChanged)="headerCheckboxClicked()"
          inputClassName="table-check-box select-col-checkbox">
        </sm-checkbox-control>
        <div class="al-icon al-ico-dropdown-arrow sm drop-down" [matMenuTriggerFor]="selectionMenu"></div>
      </div>
      <mat-menu class="light-theme" #selectionMenu="matMenu">
        <div class="menu-title">Select from project</div>
        <button mat-menu-item (click)="selectAll()">All</button>
        <button mat-menu-item (click)="emitSelection([])">None</button>
        <button mat-menu-item (click)="selectAll(true)">All matching filter</button>
      </mat-menu>
    </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]="filtersOptions[col.id] | filter:searchValues[col.id]:'label'"
        [sortOrder]="tableSortFieldsObject[col.id]"
        [fixedOptionsSubheader]="col.id === filtersOptions.TAGS ? 'System tags' : ''"
        [andFilter]="col.andFilter ? filtersMatch[col.id] === 'AND' : null"
        (sortOrderChanged)="onSortChanged($event, col.id)"
        (filterChanged)="tableFilterChanged(col, $event);"
        (searchValueChanged)="searchValueChanged($event, col.id)"
        (menuOpened)="columnFilterOpened(col)"
        (menuClosed)="columnFilterClosed(col)"
      >
      </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 ellipsis">
            <div class="model-name" matTooltipPosition="above" [smTooltip]="model.name" smShowTooltipIfEllipsis>{{model.name}}</div>
            <i *ngIf="model?.system_tags.includes('shared')" class="al-icon al-ico-link sm-md ml-2"></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">
          <span class="ellipsis" [smTooltip]="model.user?.name ? model.user?.name : 'Unknown User'" smShowTooltipIfEllipsis>{{model.user?.name ? model.user?.name : 'Unknown User'}}</span>
        </ng-container>
        <span matTooltipPosition="above" class="ellipsis"  smShowTooltipIfEllipsis [smTooltip]="model?.project?.name" *ngSwitchCase="MODELS_TABLE_COL_FIELDS.PROJECT">
          {{model?.project?.name}}
        </span>
        <span *ngSwitchCase="MODELS_TABLE_COL_FIELDS.TASK" class="ellipsis" matTooltipPosition="above" [smTooltip]="model.task?.name" smShowTooltipIfEllipsis>
          {{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.LAST_UPDATE">
          <span class="ellipsis" matTooltipPosition="above" [smTooltip]="model.last_update | date : timeFormatString">{{model.last_update | 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 class="ellipsis" smShowTooltipIfEllipsis matTooltipPosition="above" [smTooltip]="model.comment">{{model.comment}}</span>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <span *ngIf="col.type==='metadata'; else regular " smShowTooltipIfEllipsis matTooltipPosition="above" [smTooltip]="model | colGetter: col">{{model | colGetter: col}}</span>
          <ng-template #regular><span class="ellipsis" [smTooltip]="model[col.id]" smShowTooltipIfEllipsis>{{model[col.id]}}</span></ng-template>
        </ng-container>
      </ng-container>
    </ng-template>

    <ng-template let-model="rowData" let-selected="selected" let-rowNumber="rowNumber" pTemplate="card">
      <sm-table-card
        class="flex-grow-1"
        [selected]="selected"
        [cardName]="model.name"
        [columns]="tableCols"
        [rowData]="model"
        [checked]="isRowSelected(model)"
        [activeContextRow]="contextModel"
        [contextMenuOpen]="contextMenuActive"
        [entityType]="entityType"
        (click)="selected && openContextMenu({e: $event, rowData: model, backdrop: true})"
      >
        <div sm-name-icon><i *ngIf="model?.system_tags.includes('shared')" class="al-icon al-ico-link sm-md ml-2"></i></div>
        <sm-tag-list [sysTags]="getSysTags(model)" [tags]="model?.tags"></sm-tag-list>
        <div  class="ellipsis compact-columns-data" compact-columns-data>
          Updated {{model.last_update | timeAgo}} by {{model.user?.name || 'Unknown User'}}<ng-container *ngIf="model.task"><span class="dot">●</span>{{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>
