{{#global-header class="page-header"}}
  Jobs
{{/global-header}}
{{#gutter-menu class="page-body" onNamespaceChange=(action "refresh")}}
  <section class="section">
    {{#if filteredJobs.length}}
      <div class="content">
        <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
      </div>
    {{/if}}
    {{#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">Allocation Status</th>
        {{/t.head}}
        {{#t.body key="model.id" as |row|}}
          {{job-row job=row.model onClick=(action "gotoJob" row.model)}}
        {{/t.body}}
      {{/list-table}}
      <div class="table-foot">
        <nav class="pagination">
          <div class="pagination-numbers">
            {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedJobs.length}}
          </div>
          {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
          {{#p.next class="pagination-next"}} &gt; {{/p.next}}
          <ul class="pagination-list"></ul>
        </nav>
      </div>
    {{else}}
      <div class="empty-message">
        {{#if (eq filteredJobs.length 0)}}
          <h3 class="empty-message-headline">No Jobs</h3>
          <p class="empty-message-body">
            There are currently no visible jobs in the cluster. It could be that the cluster is empty. It could also mean {{#link-to "settings.tokens"}}you don't have access to see any jobs{{/link-to}}.
          </p>
        {{else if searchTerm}}
          <h3 class="empty-message-headline">No Matches</h3>
          <p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
        {{/if}}
      </div>
    {{/list-pagination}}
  </section>
{{/gutter-menu}}