{{title "Jobs"}}
<section class="section">
  {{#if this.isForbidden}}
    <ForbiddenMessage />
  {{else}}
    <div class="toolbar">
      <div class="toolbar-item">
        {{#if this.visibleJobs.length}}
          <SearchBox
            data-test-jobs-search
            @searchTerm={{mut this.searchTerm}}
            @onChange={{action this.resetPagination}}
            @placeholder="Search jobs..." />
        {{/if}}
      </div>
      {{#if (media "isMobile")}}
        <div class="toolbar-item is-right-aligned">
          {{#if (can "run job")}}
            <LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
          {{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
              type="button"
            >Run Job</button>
          {{/if}}
        </div>
      {{/if}}
      <div class="toolbar-item is-right-aligned is-mobile-full-width">
        <div class="button-bar">
          <MultiSelectDropdown
            data-test-type-facet
            @label="Type"
            @options={{this.optionsType}}
            @selection={{this.selectionType}}
            @onSelect={{action this.setFacetQueryParam "qpType"}} />
          <MultiSelectDropdown
            data-test-status-facet
            @label="Status"
            @options={{this.optionsStatus}}
            @selection={{this.selectionStatus}}
            @onSelect={{action this.setFacetQueryParam "qpStatus"}} />
          <MultiSelectDropdown
            data-test-datacenter-facet
            @label="Datacenter"
            @options={{this.optionsDatacenter}}
            @selection={{this.selectionDatacenter}}
            @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
          <MultiSelectDropdown
            data-test-prefix-facet
            @label="Prefix"
            @options={{this.optionsPrefix}}
            @selection={{this.selectionPrefix}}
            @onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
        </div>
      </div>
      {{#if (not (media "isMobile"))}}
        <div class="toolbar-item is-right-aligned">
          {{#if (can "run job")}}
            <LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
          {{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
              type="button"
            >Run Job</button>
          {{/if}}
        </div>
      {{/if}}
    </div>
    {{#if this.sortedJobs}}
      <ListPagination
        @source={{this.sortedJobs}}
        @size={{this.pageSize}}
        @page={{this.currentPage}} as |p|>
        <ListTable
          @source={{p.list}}
          @sortProperty={{this.sortProperty}}
          @sortDescending={{this.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|>
            <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @onClick={{action "gotoJob" row.model}} />
          </t.body>
        </ListTable>
        <div class="table-foot">
          <PageSizeSelect @onChange={{action this.resetPagination}} />
          <nav class="pagination">
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedJobs.length}}
              {{#if this.searchTerm}}
                <em>({{dec this.sortedJobs.length this.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>
      </ListPagination>
    {{else}}
      <div data-test-empty-jobs-list class="empty-message">
        {{#if (eq this.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 this.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 this.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>{{this.searchTerm}}</strong></p>
        {{/if}}
      </div>
    {{/if}}
  {{/if}}
</section>