{{page-title "Evaluations"}}
{{did-update this.notifyEvalChange this.currentEval}}
<section class="section">
    <div class="toolbar">
      <div class="toolbar-item">
        <SearchBox
          data-test-evaluations-search
          @searchTerm={{mut this.searchTerm}}
          @onChange={{action this._resetTokens}}
          @placeholder="Search evaluations..."
        />
      </div>
      <div class="toolbar-item is-right-aligned">
        <div class="button-bar">
          <SingleSelectDropdown
            data-test-evaluation-namespace-facet
            @label="Namespace"
            @options={{this.optionsNamespaces}}
            @selection={{this.qpNamespace}}
            @onSelect={{action this.setQueryParam "qpNamespace"}}
          />
          <SingleSelectDropdown
            data-test-evaluation-status-facet
            @label="Status"
            @options={{this.optionsEvaluationsStatus}}
            @selection={{this.status}}
            @onSelect={{action this.setQueryParam "status"}}
          />
          <SingleSelectDropdown
            data-test-evaluation-triggered-by-facet
            @label="Triggered By"
            @options={{this.optionsTriggeredBy}}
            @selection={{this.triggeredBy}}
            @onSelect={{action this.setQueryParam "triggeredBy"}}
          />
          <SingleSelectDropdown
            data-test-evaluation-type-facet
            @label="Type"
            @options={{this.optionsType}}
            @selection={{this.type}}
            @onSelect={{action this.setQueryParam "type"}}
          />
        </div>
      </div>
    </div>
  <div class="table-container">
    {{#if @model.length}}
      <ListTable data-test-eval-table @source={{@model}} as |t|>
        <t.head>
          <th>
            Evaluation ID
          </th>
          <th>
            Resource
          </th>
          <th>
            Priority
          </th>
          <th>
            Created
          </th>
          <th>
            Triggered By
          </th>
          <th>
            Status
          </th>
          <th>
            Placement Failures
          </th>
        </t.head>
        <t.body as |row|>
          <tr
            data-test-evaluation="{{row.model.shortId}}"
            style="cursor: pointer;"
            class="{{if (eq this.currentEval row.model.id) "is-active"}}"
            tabindex="0"
            {{on "click" (fn this.handleEvaluationClick row.model)}}
            {{on "keyup" (fn this.handleEvaluationClick row.model)}}
          >
            <td data-test-id
                {{keyboard-shortcut 
                  enumerated=true
                  action=(fn this.handleEvaluationClick row.model)
                }}
            >
              {{row.model.shortId}}
            </td>
            <td data-test-id>
              {{#if row.model.hasJob}}
                <LinkTo
                  data-test-evaluation-resource
                  @model={{concat row.model.plainJobId "@" row.model.namespace}}
                  @route="jobs.job"
                >
                  {{row.model.plainJobId}}
                </LinkTo>
              {{else}}
                <LinkTo
                  data-test-evaluation-resource
                  @model={{row.model.nodeId}}
                  @route="clients.client"
                >
                  {{row.model.shortNodeId}}
                </LinkTo>
              {{/if}}
            </td>
            <td data-test-priority>
              {{row.model.priority}}
            </td>
            <td data-test-create-time>
              {{format-month-ts row.model.createTime}}
            </td>
            <td data-test-triggered-by>
              {{row.model.triggeredBy}}
            </td>
            <td data-test-status class="is-one-line">
              <StatusCell @status={{row.model.status}} />
            </td>
            <td data-test-blocked>
              {{#if (eq row.model.status "blocked")}}
                N/A - In Progress
              {{else if row.model.hasPlacementFailures}}
                True
              {{else}}
                False
              {{/if}}
            </td>
          </tr>
        </t.body>
      </ListTable>
      <div class="table-foot with-padding">
        <PageSizeSelect data-test-per-page @onChange={{this.onChange}} />
        <div>
          <button
            class="button"
            data-test-eval-refresh
            type="button"
            {{on "click" this.refresh}}
          >
            {{x-icon "refresh-default" class="is-text"}}
            Refresh
          </button>
          <button
            data-test-eval-pagination-prev
            type="button"
            class="button is-text is-borderless"
            disabled={{this.shouldDisablePrev}}
            {{on "click" (fn this.onPrev this.lastToken)}}
          >
            {{x-icon "chevron-left" class="is-large"}}
          </button>
          <button
            data-test-eval-pagination-next
            type="button"
            class="button is-text is-borderless"
            disabled={{this.shouldDisableNext}}
            {{on "click" (fn this.onNext @model.meta.nextToken)}}
          >
            {{x-icon "chevron-right" class="is-large"}}
          </button>
        </div>
      </div>
    {{else}}
      <div class="boxed-section-body">
        <div class="empty-message" data-test-empty-evaluations-list>
          <h3
            class="empty-message-headline"
            data-test-empty-evalations-list-headline
          >
            No Matches
          </h3>
          <p class="empty-message-body">
            {{#if this.hasFiltersApplied}}
              <span data-test-no-eval-match>
                No evaluations that match:
                <strong>
                  {{this.noMatchText}}
                </strong>
              </span>
            {{else}}
              <span data-test-no-eval>
                There are no evaluations
              </span>
            {{/if}}
          </p>
        </div>
      </div>
    {{/if}}
  </div>
  <EvaluationSidebar::Detail
    @statechart={{this.statechart}}
    @fns={{hash
      closeSidebar=this.closeSidebar
      handleEvaluationClick=this.handleEvaluationClick
    }}
  />
</section>