{{#unless displayJobInline}}
<h3>{{ this.id }}</h3>
{{/unless}}

<h5>Actions</h5>
<button class="btn btn-danger js-remove-job" data-queue-host="{{ queueHost }}" data-queue-name="{{ queueName }}"
  data-job-id="{{ this.id }}" data-job-state="{{ jobState }}">
  Remove
</button>

{{#if showRetryButton}}
<button class="btn btn-success js-retry-job" data-queue-host="{{ queueHost }}" data-queue-name="{{ queueName }}"
  data-job-id="{{ this.id }}">
  {{ retryButtonText }}
</button>
{{/if}}

{{#if showPromoteButton}}
<button class="btn btn-success js-promote-job" data-queue-host="{{ queueHost }}" data-queue-name="{{ queueName }}"
  data-job-id="{{ this.id }}">
  Promote
</button>
{{/if}}

<div class="row">
  <div class="col-sm-3">
    <h5>State</h5>
    {{capitalize jobState}}
  </div>

  <div class="col-sm-3">
    <h5>Timestamp</h5>
    {{#if (getTimestamp this)}}
    {{moment (getTimestamp this) "llll"}}
    {{/if}}
  </div>

  {{#if this.processedOn}}
  <div class="col-sm-3">
    <h5>Processed</h5>
    {{moment this.processedOn "llll"}}
  </div>
  {{/if}}

  {{#if this.finishedOn}}
  <div class="col-sm-3">
    <h5>Finished</h5>
    {{moment this.finishedOn "llll"}}
  </div>
  {{/if}}

  {{#eq jobState 'delayed'}}
  <div class="col-sm-3">
    <h5>Executes At</h5>
    {{moment (getDelayedExectionAt this) "llll"}}
  </div>
  {{/eq}}

  <div class="col-sm-3">
    <h5>Attempts Made</h5>
    {{this.attemptsMade}}

    {{#if this.options}}
    {{length this.options.stacktraces}}
    {{/if}}
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    <h5>Permalinks</h5>
    <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ this.id }}" class="btn btn-info">Job
      {{ this.id }}</a>
    <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ this.id }}?json=true"
      class="btn btn-info">JSON</a>
  </div>
</div>

{{#unless this.queue.IS_BEE}}
<h5>Progress</h5>
{{#if (isNumber this._progress)}}
<div class="progress">
  <div class="progress-bar
                {{#eq jobState 'failed'}}
                progress-bar-danger
                {{/eq}}" role="progressbar" aria-valuenow="{{ this._progress }}" aria-valuemin="0" aria-valuemax="100"
    style="width: {{ this._progress }}%; min-width: 2em;">
    {{ this._progress }}%
  </div>
</div>
{{else}}
<pre>{{json this._progress true}}</pre>
{{/if}}
{{/unless}}

{{#if this.returnvalue}}
<h5>Return Value</h5>
<pre><code class="json">{{json this.returnvalue true}}</code></pre>
{{/if}}

{{#if this.failedReason}}
<h5>Reason for failure</h5>
<pre><code>{{this.failedReason}}</code></pre>
{{/if}}

{{#if stacktraces}}
<h5>Stacktraces</h5>
{{#each stacktraces}}
<pre>{{ this }}</pre>
{{/each}}
{{/if}}


<h5>Data</h5>
<pre><code class="json">{{json this.data true}}</code></pre>

{{#if this.logs}}
<h5>Logs</h5>
<pre><code class="json">{{json this.logs true}}</code></pre>
{{/if}}