{{title "Jobs"}}
<section class="section">
  {{#if isForbidden}}
    {{partial "partials/forbidden-message"}}
  {{else}}
    <div class="toolbar">
      <div class="toolbar-item">
        {{#if visibleJobs.length}}
          {{search-box
            data-test-jobs-search
            searchTerm=(mut searchTerm)
            onChange=(action resetPagination)
            placeholder="Search jobs..."}}
        {{/if}}
      </div>
      {{#if (media "isMobile")}}
        <div class="toolbar-item is-right-aligned">
          {{#if (can "run job")}}
            {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
          {{else}}
            <button
              data-test-run-job
              class="button is-primary is-disabled tooltip is-right-aligned"
              aria-label="You don’t have permission to run jobs"
              disabled
            >Run Job</button>
          {{/if}}
        </div>
      {{/if}}
      <div class="toolbar-item is-right-aligned is-mobile-full-width">
        <div class="button-bar">
          {{multi-select-dropdown
            data-test-type-facet
            label="Type"
            options=optionsType
            selection=selectionType
            onSelect=(action setFacetQueryParam "qpType")}}
          {{multi-select-dropdown
            data-test-status-facet
            label="Status"
            options=optionsStatus
            selection=selectionStatus
            onSelect=(action setFacetQueryParam "qpStatus")}}
          {{multi-select-dropdown
            data-test-datacenter-facet
            label="Datacenter"
            options=optionsDatacenter
            selection=selectionDatacenter
            onSelect=(action setFacetQueryParam "qpDatacenter")}}
          {{multi-select-dropdown
            data-test-prefix-facet
            label="Prefix"
            options=optionsPrefix
            selection=selectionPrefix
            onSelect=(action setFacetQueryParam "qpPrefix")}}
        </div>
      </div>
      {{#if (not (media "isMobile"))}}
        <div class="toolbar-item is-right-aligned">
          {{#if (can "run job")}}
            {{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
          {{else}}
            <button
              data-test-run-job
              class="button is-primary is-disabled tooltip is-right-aligned"
              aria-label="You don’t have permission to run jobs"
              disabled
            >Run Job</button>
          {{/if}}
        </div>
      {{/if}}
    </div>
    {{#if sortedJobs}}
      {{#list-pagination
        source=sortedJobs
        size=pageSize
        page=currentPage as |p|}}
        {{#list-table
          source=p.list
          sortProperty=sortProperty
          sortDescending=sortDescending
          class="with-foot" as |t|}}
          {{#t.head}}
            {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
            {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
            {{#t.sort-by prop="type"}}Type{{/t.sort-by}}
            {{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
            <th>Groups</th>
            <th class="is-3">Summary</th>
          {{/t.head}}
          {{#t.body key="model.id" as |row|}}
            {{job-row data-test-job-row=row.model.plainId job=row.model onClick=(action "gotoJob" row.model)}}
          {{/t.body}}
        {{/list-table}}
        <div class="table-foot">
          {{page-size-select}}
          <nav class="pagination">
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
              {{#if searchTerm}}
                <em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
              {{/if}}
            </div>
            {{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
            {{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
            <ul class="pagination-list"></ul>
          </nav>
        </div>
      {{/list-pagination}}
    {{else}}
      <div data-test-empty-jobs-list class="empty-message">
        {{#if (eq visibleJobs.length 0)}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
          <p class="empty-message-body">
            The cluster is currently empty.
          </p>
        {{else if (eq filteredJobs.length 0)}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
          <p class="empty-message-body">
            No jobs match your current filter selection.
          </p>
        {{else if searchTerm}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
          <p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
        {{/if}}
      </div>
    {{/if}}
  {{/if}}
</section>