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

<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">
          <div class="jsoneditorx hide" id="jsoneditor" style="height:300px;"></div>
          <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;" placeholder="Job name (optional)">
            {{/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>
{{/contentFor}}

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