{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<div class="boxed-section-head">
  Job Launches
  {{#if this.job.parameterized}}
    {{#if (can "dispatch job" namespace=this.job.namespace)}}
      <LinkTo
        data-test-dispatch-button
        @route="jobs.job.dispatch"
        class="button is-primary is-compact pull-right"
      >
        Dispatch Job
      </LinkTo>
    {{else}}
      <button
        data-test-dispatch-button
        class="button is-disabled is-primary is-compact pull-right tooltip multiline"
        aria-label="You don’t have permission to dispatch jobs"
        disabled
        type="button"
      >
        Dispatch Job
      </button>
    {{/if}}
  {{/if}}
</div>
<div
  class="boxed-section-body {{if this.sortedChildren.length "is-full-bleed"}}"
>
  {{#if this.sortedChildren}}
    <ListPagination
      @source={{this.sortedChildren}}
      @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 data-test-jobs-header>
          <t.sort-by @prop="name">
            Name
          </t.sort-by>
          <t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>
            Submitted At
          </t.sort-by>
          <t.sort-by @prop="status">
            Status
          </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 @job={{row.model}} @context="child" />
        </t.body>
      </ListTable>
      <div class="table-foot">
        <PageSizeSelect @onChange={{action this.resetPagination}} />
        <nav class="pagination">
          <div class="pagination-numbers">
            {{p.startsAt}}
            –
            {{p.endsAt}}
            of
            {{this.sortedChildren.length}}
          </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 class="empty-message">
      <h3 class="empty-message-headline">
        No Job Launches
      </h3>
      <p class="empty-message-body">
        No remaining living job launches.
      </p>
    </div>
  {{/if}}
</div>