<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}}

{{#if queueIsBullMQ}}
{{#if hasRateLimitTtl}}
<button class="btn btn-xs btn-default js-remove-rate-limit-key" style="margin-bottom: 12px;" data-queue-host="{{ queueHost }}"
  data-queue-name="{{ queueName }}">
  Remove Rate Limit Key
</button>
{{/if}}
{{/if}}

<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>
    {{#if globalConfig}}
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="js-toggle-update-queue-meta btn btn-default btn-xs pull-right">Update</div>
        <h4 class="panel-title">Global Configuration</h4>
      </div>
      <div class="panel-body">
        <div class="meta-config-editor panel-body hide overflow-hidden">
          <div class="form-group row">
            <label for="queue-concurrency-input-search" class="col-sm-8 col-form-label">Concurrency</label>
            <div class="col-sm-4">
              <input type="number" class="js-update-meta-concurrency form-control input-sm" style="margin-right: 10px;"
                {{#if (isNumber globalConfig.concurrency)}}
                value={{ globalConfig.concurrency }}
                {{/if}}
                placeholder="Concurrency"
              >
            </div>
          </div>
          <div class="form-group row">
            <label for="queue-rl-max-input-search" class="col-sm-8 col-form-label">Rate Limit Max</label>
            <div class="col-sm-4">
              <input type="number" class="js-update-meta-rl-max form-control input-sm" style="margin-right: 10px;"
                {{#if (isNumber globalConfig.max)}}
                value={{ globalConfig.max }}
                {{/if}}
                placeholder="Max"
              >
            </div>
          </div>
          <div class="form-group row">
            <label for="queue-rl-duration-input-search" class="col-sm-8 col-form-label">Rate Limit Duration</label>
            <div class="col-sm-4">
              <input type="number" class="js-update-meta-rl-duration form-control input-sm" style="margin-right: 10px;"
                {{#if (isNumber globalConfig.duration)}}
                value={{ globalConfig.duration }}
                {{/if}}
                placeholder="Duration in ms"
              >
            </div>
          </div>
          <div class="js-update-queue-meta btn btn-primary btn-sm">
            Update
          </div>
        </div>
        <table class="meta-table table">
          {{#each globalConfig}}
          <tr>
            <th>{{ @key }}</th>
            <th>{{ this }}</th>
          </tr>
          {{/each}}
        </table>
      </div>
    </div>
    {{/if}}
  </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}}