<h2>Queue <code>{{ queueHost }}/{{ queueName }}</code></h2>

{{#unless queueIsBee}}
{{#if isPaused}}
<button class="btn btn-xs btn-success js-resume-queue" style="margin-bottom: 12px;" data-queue-host="{{ queueHost }}"
  data-queue-name="{{ queueName }}">
  Resume queue
</button>
{{else}}
<button class="btn btn-xs btn-danger js-pause-queue" style="margin-bottom: 12px;" data-queue-host="{{ queueHost }}"
  data-queue-name="{{ queueName }}">
  Pause queue
</button>
{{/if}}
{{/unless}}

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="js-toggle-add-job-editor btn btn-default btn-xs pull-right">Add Job</div>
        <h4 class="panel-title">Job Types</h4>
      </div>
      <div class="panel-body">
        <div class="jsoneditorx form-group hide overflow-hidden">
          {{#unless queueIsBee}}
          <div class="panel with-nav-tabs panel-primary">
            <ul class="nav nav-tabs nav-justified">
              <li class="active"><a href="#tab1primary" data-toggle="tab">Payload</a></li>
              <li><a class="text-white" href="#tab2primary" data-toggle="tab">Options</a></li>
            </ul>
            <div class="panel-body">
              <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1primary">
          {{/unless}}
                  <div class="jsoneditorx hide" id="jsoneditor" style="height:300px;"></div>
          {{#unless queueIsBee}}
                </div>
                <div class="tab-pane fade" id="tab2primary">
                  <div class="jsoneditorx hide" id="jsoneditoropts" style="height:300px;"></div>
                </div>
              </div>
            </div>
          </div>
          {{/unless}}
          <br />
          <div class="form-inline pull-right">
            {{#unless queueIsBee}}
            <input type="text" class="js-add-job-name form-control input-sm" style="margin-right: 10px;"
              {{#if queueIsBullMQ}}
              placeholder="Job name"
              {{else}}
              placeholder="Job name (optional)"
              {{/if}}
            >
            {{/unless}}
            <div class="js-add-job btn btn-primary btn-sm">Create</div>
          </div>
        </div>
        <ul class="list-group">
          {{#each jobCounts}}
          <li class="list-group-item">
            <span class="badge">{{ this }}</span>
            <a href="{{ ../basePath }}/{{ encodeURI ../queueHost }}/{{ encodeURI ../queueName }}/{{ @key }}">
              <span class="text-capitalize">{{ @key }}</span>
            </a>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">Redis Statistics</h4>
      </div>
      <div class="panel-body">
        <table class="table">
          {{#each stats}}
          <tr>
            <th>{{ @key }}</th>
            <th>{{ this }}</th>
          </tr>
          {{/each}}
        </table>
      </div>
    </div>
  </div>
</div>

{{#contentFor 'sidebar'}}
<li><a href="{{ basePath }}/">Queues Overview</a></li>
<li class="active"><a href="#">Queue <code>{{ queueHost }}/{{ queueName }}</code></a></li>
{{#if hasFlows}}
<li><a href="{{ basePath }}/flows/">Flows Overview</a></li>
{{/if}}
{{/contentFor}}

{{#contentFor 'script'}}
window.jsonEditor = new JSONEditor(document.getElementById('jsoneditor'), { modes: ['code','tree','text'] });
if(document.getElementById('jsoneditoropts')) window.jsonEditorOpts = new JSONEditor(document.getElementById('jsoneditoropts'), { modes: ['code','tree','text'] });
window.arenaInitialPayload = {
queueHost: "{{ queueHost }}",
queueName: "{{ queueName }}"
};
{{/contentFor}}