{{page-title "Task " this.model.name}}
<TaskSubnav @task={{this.model}} />
<section class="section">
  {{#if this.error}}
    <div data-test-inline-error class="notification is-danger">
      <div class="columns">
        <div class="column">
          <h3 data-test-inline-error-title class="title is-4">
            {{this.error.title}}
          </h3>
          <p data-test-inline-error-body>
            {{this.error.description}}
          </p>
        </div>
        <div class="column is-centered is-minimum">
          <button
            data-test-inline-error-close
            class="button is-danger"
            onclick={{action this.onDismiss}}
            type="button"
          >
            Okay
          </button>
        </div>
      </div>
    </div>
  {{/if}}
  <h1 class="title with-flex" data-test-title>
    <div>
      {{this.model.name}}
      {{#if this.model.isConnectProxy}}
        <ProxyTag @class="bumper-left" />
      {{/if}}
      <span
        class="{{unless this.model.isConnectProxy "bumper-left"}}
           tag
          {{this.model.stateClass}}"
        data-test-state
      >
        {{this.model.state}}
      </span>
    </div>
    <div>
      {{#if this.model.isRunning}}
        <div class="two-step-button">
          <Exec::OpenButton
            @job={{this.model.task.taskGroup.job}}
            @taskGroup={{this.model.task.taskGroup}}
            @allocation={{this.model.allocation}}
            @task={{this.model.task}}
          />
        </div>
        <TwoStepButton
          data-test-restart
          @alignRight={{true}}
          @idleText="Restart Task"
          @cancelText="Cancel"
          @confirmText="Yes, Restart Task"
          @confirmationMessage="Are you sure? This will restart the task in-place."
          @awaitingConfirmation={{this.restartTask.isRunning}}
          @disabled={{this.restartTask.isRunning}}
          @onConfirm={{perform this.restartTask}}
        />
      {{/if}}
    </div>
  </h1>
  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">
        Task Details
      </span>
      <span class="pair" data-test-started-at>
        <span class="term">
          Started At
        </span>
        {{format-ts this.model.startedAt}}
      </span>
      {{#if this.model.finishedAt}}
        <span class="pair">
          <span class="term">
            Finished At
          </span>
          {{format-ts this.model.finishedAt}}
        </span>
      {{/if}}
      <span class="pair">
        <span class="term">
          Driver
        </span>
        {{this.model.task.driver}}
      </span>
      <span class="pair">
        <span class="term">
          Lifecycle
        </span>
        <span data-test-lifecycle>
          {{this.model.task.lifecycleName}}
        </span>
      </span>

      {{#if (and (can "list variables") this.model.task.pathLinkedVariable)}}
        <span class="pair" data-test-task-stat="variables">
          <LinkTo @route="variables.variable" @model={{this.model.task.pathLinkedVariable.id}}>Variables</LinkTo>
        </span>
      {{/if}}

    </div>
  </div>
  <div class="boxed-section">
    <div class="boxed-section-head is-hollow">
      Resource Utilization
    </div>
    <div class="boxed-section-body">
      {{#if this.model.isRunning}}
        <div class="columns">
          <div class="column">
            <PrimaryMetric::Task @taskState={{this.model}} @metric="cpu" />
          </div>
          <div class="column">
            <PrimaryMetric::Task @taskState={{this.model}} @metric="memory" />
          </div>
        </div>
      {{else}}
        <div data-test-resource-error class="empty-message">
          <h3 data-test-resource-error-headline class="empty-message-headline">
            Task isn't running
          </h3>
          <p class="empty-message-body">
            Only running tasks utilize resources.
          </p>
        </div>
      {{/if}}
    </div>
  </div>
  {{#if this.model.task.volumeMounts.length}}
    <div data-test-volumes class="boxed-section">
      <div class="boxed-section-head">
        Volumes
      </div>
      <div class="boxed-section-body is-full-bleed">
        <ListTable @source={{this.model.task.volumeMounts}} as |t|>
          <t.head>
            <th>
              Name
            </th>
            <th>
              Destination
            </th>
            <th>
              Permissions
            </th>
            <th>
              Client Source
            </th>
          </t.head>
          <t.body as |row|>
            <tr data-test-volume>
              <td data-test-volume-name>
                {{row.model.volume}}
              </td>
              <td data-test-volume-destination>
                <code>
                  {{row.model.destination}}
                </code>
              </td>
              <td data-test-volume-permissions>
                {{if row.model.readOnly "Read" "Read/Write"}}
              </td>
              <td data-test-volume-client-source>
                {{#if row.model.isCSI}}
                  <LinkTo
                    @route="csi.volumes.volume"
                    @model={{concat
                    (format-volume-name
                      source=row.model.source
                      isPerAlloc=row.model.volumeDeclaration.perAlloc
                      volumeExtension=this.model.allocation.volumeExtension)
                    "@"
                    row.model.namespace.id
                    }}
                  >
                  {{format-volume-name
                    source=row.model.source
                    isPerAlloc=row.model.volumeDeclaration.perAlloc
                    volumeExtension=this.model.allocation.volumeExtension}}
                  </LinkTo>
                {{else}}
                  {{row.model.source}}
                {{/if}}
              </td>
            </tr>
          </t.body>
        </ListTable>
      </div>
    </div>
  {{/if}}
  <div class="boxed-section">
    <div class="boxed-section-head">
      Recent Events
    </div>
    <div class="boxed-section-body is-full-bleed">
      <ListTable
        @source={{reverse this.model.events}}
        @class="is-striped" as |t|
      >
        <t.head>
          <th class="is-3">
            Time
          </th>
          <th class="is-1">
            Type
          </th>
          <th>
            Description
          </th>
        </t.head>
        <t.body as |row|>
          <tr data-test-task-event>
            <td data-test-task-event-time>
              {{format-ts row.model.time}}
            </td>
            <td data-test-task-event-type>
              {{row.model.type}}
            </td>
            <td data-test-task-event-message>
              {{#if row.model.message}}
                {{row.model.message}}
              {{else}}
                <em>
                  No message
                </em>
              {{/if}}
            </td>
          </tr>
        </t.body>
      </ListTable>
    </div>
  </div>
</section>