<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"
  [activateFromMenuButton]="false"
  [useCurrentEntity]="singleRowContext"
  [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
    [cardHeight]="114"
    [cardsCollapsed]="cardsCollapsed"
    [initialColumns]="initialColumns"
    [selectionMode]="selectionMode"
    [tableData]="models"
    [noMoreData]="noMoreModels"
    [resizableColumns]="enableMultiSelect"
    [columns]="tableCols"
    [reorderableColumns]="reorderableColumns && enableMultiSelect"
    [scrollable]="true"
    [columnsOrder]="colsOrder"
    [lazyLoading]="true"
    [selection]="selectedModel"
    [checkedItems]="selectedModels"
    [activeContextRow]="contextModel"
    [contextMenuOpen]="contextMenuActive"
    [minimizedView]="minimizedView"
    [minimizedTableHeader]="'MODEL LIST'"
    [sortFields]="tableSortFields"
    [keyboardControl]="true"
    [autoLoadMore]="true"
    (colReordered)="columnsReordered.emit($event)"
    (rowSelectionChanged)="onRowSelectionChanged($event)"
    (rowClicked)="tableRowClicked($event)"
    (rowDoubleClicked)="modelSelectionChanged.emit({model: $event.data, openInfo: true})"
    (loadMoreClicked)="onLoadMoreClicked()"
    (rowRightClick)="openContextMenu($event)"
    (sortChanged)="onSortChanged($event.isShift, $event.field)"
    (columnResized)="columnResized.emit($event)"
    (cardsCollapsedToggle)="cardsCollapsedChanged.emit()"
  >
    <ng-template let-col pTemplate="cardFilter">
      <sm-table-card-filter-template [options]="filtersOptions"
                                     [value]="filtersValues"
                                     [subValue]="filtersSubValues[modelsTableColFields.TAGS]"
                                     [columns]="initialColumns"
                                     [filterMatch]="filtersMatch"
                                     fixedOptionsSubheader="System tags"
                                     (subFilterChanged)="tableFilterChanged({id:'system_tags'}, $event)"
                                     (filterChanged)="tableAllFiltersChanged($event)"
                                     (menuOpened)="columnFilterOpened($event)"
                                     (menuClosed)="columnFilterClosed($event)"
                                     (clearAll)="clearAllFilters.emit(tableFilters)"
      ></sm-table-card-filter-template>
    </ng-template>
    <!--CHECKBOX TEMPLATE-->
    <ng-template let-col pTemplate="checkbox">
      <div *ngIf="!hideSelectAll" class="d-flex align-items-center">
        <sm-checkbox-control
          *ngIf="col.id === modelsTableColFields.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 drop-down" data-id="Checkbox Dropdown" [matMenuTriggerFor]="selectionMenu"></div>
      </div>
      <mat-menu class="light-theme" #selectionMenu="matMenu">
        <div class="menu-title">Select from project</div>
        <button mat-menu-item data-id="All Option" (click)="selectAll()">All</button>
        <button mat-menu-item data-id="None Option" (click)="emitSelection([])">None</button>
        <button mat-menu-item data-id="All Matching Filter Option" (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, col.asyncFilter)"
        (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="modelsTableColFields.NAME">
          <div class="d-flex flex-row flex-nowrap ellipsis">
            <div class="model-name" [smTooltip]="model.name" smShowTooltipIfEllipsis>{{model.name}}</div>
            <i *ngIf="model?.system_tags?.includes('shared')" class="al-icon al-ico-link sm ms-2"></i>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="modelsTableColFields.TAGS">
          <sm-tag-list [tags]="model.tags" [sysTags]="getSysTags(model)"></sm-tag-list>
        </ng-container>
        <ng-container *ngSwitchCase="modelsTableColFields.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 class="ellipsis" smShowTooltipIfEllipsis [smTooltip]="model?.project?.name"
              *ngSwitchCase="modelsTableColFields.PROJECT">
          {{model?.project?.name}}
        </span>
        <span *ngSwitchCase="modelsTableColFields.TASK" class="ellipsis" [smTooltip]="model.task?.name"
              smShowTooltipIfEllipsis>
          {{model.task?.name}}
        </span>
        <ng-container *ngSwitchCase="modelsTableColFields.READY">
          <sm-status-icon-label
            [status]="model?.ready? 'published': 'created'"></sm-status-icon-label>
        </ng-container>
        <ng-container *ngSwitchCase="modelsTableColFields.LAST_UPDATE">
          <span class="ellipsis"
                [smTooltip]="model.last_update | date : timeFormatString">{{model.last_update | timeAgo}}</span>
        </ng-container>

        <sm-checkbox-control
          *ngSwitchCase="modelsTableColFields.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="modelsTableColFields.COMMENT">
          <span class="ellipsis" smShowTooltipIfEllipsis [smTooltip]="model.comment">{{model.comment}}</span>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <span *ngIf="col.type==='metadata'; else regular " smShowTooltipIfEllipsis
                [smTooltip]="model | colGetter: col">{{model | colGetter: col}}</span>
          <ng-template #regular>
            <sm-hyper-param-metric-column [roundedMetricValue]="roundedMetricValues[col.id]"
                                          [col]="col"
                                          [experiment]="model"
                                          (expandClicked)="columnsWidthChanged($event)">
            </sm-hyper-param-metric-column>
          </ng-template>
        </ng-container>
      </ng-container>
    </ng-template>

    <ng-template let-model="rowData" let-selected="selected" let-rowNumber="rowNumber" pTemplate="card">
      <sm-table-card
        [selected]="selected"
        [cardName]="model.name"
        [columns]="tableCols"
        [rowData]="model"
        [checked]="isRowSelected(model)"
        [activeContextRow]="contextModel"
        [contextMenuOpen]="contextMenuActive"
        [entityType]="entityType"
        [tagsTemplate]="tagList"
        [compactColDataTemplate]="compactCol"
        [class.no-tags]="getSysTags(model).length === 0 && model?.tags.length === 0"
        (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 ms-2"></i>
        </div>
        <sm-status-icon-label
          [status]="model?.ready? 'published': 'created'"></sm-status-icon-label>
        <sm-checkbox-control fieldName="selected" [formData]="isRowSelected(model)"
                             (formDataChanged)="rowSelectedChanged($event, model)"
                             inputClassName="table-check-box table-body"></sm-checkbox-control>
      </sm-table-card>
      <ng-template #tagList>
        <sm-tag-list [@inOutAnimation] *ngIf="!cardsCollapsed" [sysTags]="getSysTags(model)" [tags]="model?.tags"></sm-tag-list>
      </ng-template>
      <ng-template #compactCol>
        <div [@inOutAnimation] *ngIf="!cardsCollapsed" class="ellipsis 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>
      </ng-template>
    </ng-template>
  </sm-table>
</div>
