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

<h3>{{capitalize state}} Jobs (total {{ jobCount }})</h3>


<div class="row pagination-container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Search</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline" method="get">
                <div class="form-group"  style="width: 50%">
                    <input name="search" class="form-control search-keyword" style="width:99%" id="exampleInputEmail3" value="{{ search }}" placeholder="Keyword">
                </div>
                <input type="hidden" name="searchTypes" value="{{ state }}">
                <button type="submit" class="btn btn-primary">Search</button>
                <button type="submit" class="btn btn-default" onclick="$('.search-keyword').val('')">Clear</button>
            </form>
        </div>
    </div>
  <div class="col-sm-6">
      {{#unless disablePagination}}
      <nav aria-label="Job navigation">
        <ul class="pagination">
          <li
            {{#eq currentPage 1}}
              class="disabled">
                <span>&laquo;</span>
            {{else}}
              ><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ subtract currentPage 1 }}&amp;pageSize={{ pageSize }}{{ searchQuery }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            {{/eq}}
          </li>
          {{#each pages}}
            <li
              {{#eq this ../currentPage}}
                class="active"
              {{/eq}}>

              <a href="{{ ../basePath }}/{{ encodeURI ../queueHost }}/{{ encodeURI ../queueName }}/{{ ../state }}?page={{ this }}&amp;pageSize={{ ../pageSize }}{{ ../searchQuery }}">{{ this }}</a>
            </li>
          {{/each}}
          <li
            {{#eq currentPage lastPage}}
              class="disabled">
                <span>&raquo;</span>
            {{else}}
              ><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ add currentPage 1 }}&amp;pageSize={{ pageSize }}{{ searchQuery }}" aria-label="Previous">
                <span aria-hidden="true">&raquo;</span>
              </a>
            {{/eq}}
          </li>
        </ul>
      </nav>
    {{else}}
      Bee-queue does not support pagination for {{ state }} queues &mdash; currently displaying up to <b>{{ pageSize }} jobs</b>. To change count, use "Size" dropdown.
    {{/unless}}
  </div>
  <div class="col-sm-6 text-right">
    <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}.json" type="button" class="btn btn-primary">
      Dump jobs to JSON (limited to 1000)
    </a>
    <button type="button" data-action="remove_all" data-queue-name="{{ queueName }}" data-job-count="{{ jobCount }}" data-queue-host="{{ queueHost }}" data-queue-state="{{ state }}" class="js-bulk-action btn btn-danger">
      Remove All Jobs
    </button>
    <button type="button" data-action="remove" data-queue-name="{{ queueName }}" data-queue-host="{{ queueHost }}" data-queue-state="{{ state }}" class="js-bulk-action btn btn-danger">
      Remove Jobs
    </button>
    <button type="button" data-action="promote" data-queue-name="{{ queueName }}" data-queue-host="{{ queueHost }}" data-queue-state="{{ state }}" class="js-bulk-action btn btn-primary">
      Promote Jobs
    </button>
    {{#eq state 'failed'}}
      <button type="button" data-action="retry" data-queue-name="{{ queueName }}" data-queue-host="{{ queueHost }}" data-queue-state="{{ state }}" class="js-bulk-action btn btn-success">
        Retry Jobs
      </button>
    {{/eq}}

      <div class="btn-group">
        {{#if disablePagination}}
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Size <span class="caret"></span>
          </button>
        {{else}}
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Page Size <span class="caret"></span>
          </button>
        {{/if}}
        <ul class="dropdown-menu">
          <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ currentPage }}&amp;pageSize={{ pageSize }}{{ searchQuery }}">{{ pageSize }} jobs</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ adjustedPage currentPage pageSize 5 }}&amp;pageSize=5{{ searchQuery }}">5 jobs</a></li>
          <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ adjustedPage currentPage pageSize 20 }}&amp;pageSize=20{{ searchQuery }}">20 jobs</a></li>
          <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ adjustedPage currentPage pageSize 100 }}&amp;pageSize=100{{ searchQuery }}">100 jobs</a></li>
          <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ state }}?page={{ adjustedPage currentPage pageSize 1000 }}&amp;pageSize=1000{{ searchQuery }}">1000 jobs</a></li>
        </ul>
      </div>
  </div>
</div>

<div class="row">
    <div style="padding-left: 25px">
            <label>
                <input class="js-select-all-jobs" type="checkbox" />
                <h5 class="header-collapse select-all-text" style="padding-left: 10px">Select All</h5>
            </label>
    </div>
  <div class="col-sm-12">
    <form class="js-bulk-job-form job-list">
      <table class="table table-bordered table-striped">
          <thead>
          <tr style="font-size: 13px">
              <th></th>
              <th>Id</th>
              <th>Name</th>
              <th>Timestamp</th>
              <th>Delay</th>
          </tr>
          </thead>
        {{#each jobs}}
            <tr>
                <td>
                    <div class="js-bulk-action-container bulk-job-container">
                        <input type="hidden" name="jobId" value="{{ this.id }}" />
                        <input class="js-bulk-job" name="jobChecked" type="checkbox" />
                    </div>
                </td>
                <td>
                    <span class="label label-default">{{ this.id }}</span>
                </td>
                <td width="100%">
                    <a role="button"  onclick="$('#col{{encodeIdAttr this.id}}').toggle(); return false">
                      <h5 class="header-collapse" style="line-height: 20px">
                        {{#if this.data.name}}
                          <span>{{ this.data.name }}</span>
                        {{else if this.name}}
                          <span>{{ this.name }}</span>
                        {{/if}}
                      </h5>
                    </a>
            </td>
            <td style="white-space: nowrap; font-size: 14px;">
                {{#if this.opts.timestamp}}
                    {{moment this.opts.timestamp "llll"}}
                {{/if}}
            </td>
            <td style="white-space: nowrap; font-size: 14px;">
                {{#if this.opts.delay}}
                    {{this.opts.delay}}
                {{/if}}
            </td>
        </tr>
            <tr id="col{{encodeIdAttr this.id}}" style="display: none">
                <td colspan="5">
                <div>
                    {{~> dashboard/jobDetails this basePath=../basePath displayJobInline=true queueName=../queueName queueHost=../queueHost jobState=../state }}
                </div>
                </td>
            </tr>
        {{/each}}
        </table>
    </form>
  </div>
</div>

<p>
  <em>Hint: </em><kbd><span style="font-family: sans-serif;">&#8679;</span> + Click</kbd><em> to select a range of jobs.</em>
</p>

{{#contentFor 'sidebar'}}
  <li><a href="{{ basePath }}/">Queues Overview</a></li>
  <li><a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}">Queue <code>{{ queueHost }}/{{ queueName }}</code></a></li>
  <li class="active"><a href="#">{{capitalize state}} Jobs</a></li>
{{/contentFor}}

<div class="modal fade" id="processModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Process</h4>
            </div>
            <div class="modal-body process-display">
                <p><b>Done:</b> <span class="process-done">0</span></p>
                <p><b>Total:</b> <span class="process-total">0</span></p>
                <div class="progress">
                    <div class="progress-bar process-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
