<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MRQ Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bootstrap-slate.min.css" media="screen">
    <link rel="stylesheet" href="/static/css/datatables.css" media="screen">
    <link rel="stylesheet" href="/static/css/mrq-dashboard.css" media="screen">
  </head>
  <body>

    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand">MRQ Dashboard</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li class="js-nav-queues">
              <a href="/#">Queues</a>
            </li>
            <li class="js-nav-workers">
              <a href="/#workers">Workers</a>
            </li>
            <li class="js-nav-jobs">
              <a href="/#jobs">Jobs</a>
            </li>
            <li class="js-nav-scheduledjobs">
              <a href="/#scheduledjobs">Scheduled Jobs</a>
            </li>

            <!--
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
              <ul class="dropdown-menu" aria-labelledby="download">
                <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li>
                <li><a href="./bootstrap.css">bootstrap.css</a></li>
                <li class="divider"></li>
                <li><a href="./variables.less">variables.less</a></li>
                <li><a href="./bootswatch.less">bootswatch.less</a></li>
              </ul>
            </li>
            -->
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a>Autorefresh <select class="js-autorefresh">
              <option value="1">1s</option>
              <option value="3">3s</option>
              <option selected="selected" value="5">5s</option>
              <option value="10">10s</option>
              <option value="20">20s</option>
              <option value="60">1m</option>
              <option value="300">5m</option>
              <option value="600">10m</option>
              <option value="0">Disabled</option>
            </select></a>
            </li>

            <li><a href="https://github.com/pricingassistant/mrq" target="_blank">Github</a></li>
          </ul>

        </div>
      </div>
    </div>


    <div class="container" style="margin-top:52px;">

      <div id="app-container">

        <div class="ox-loader">
            Loading...
        </div>

      </div>


      <script id="tpl-page-root" type="text/template">


        <div class="js-page-queues"></div>
        <div class="js-page-workers"></div>
        <div class="js-page-worker"></div>
        <div class="js-page-jobs"></div>
        <div class="js-page-scheduledjobs"></div>

      </script>


      <script id="tpl-page-queues" type="text/template">

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-workers" type="text/template">

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-scheduledjobs" type="text/template">

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-jobs" type="text/template">

        <div class="modal js-jobs-modal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
                <textarea class="js-jobs-modal-content"></textarea>
              </div>
            </div>
          </div>
        </div>

        <div class="container" style="margin-bottom:0px;">

          <form class="form-inline js-datatable-filters pull-left" role="form">
            <br/>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-id">ID</label>
              <input type="text" class="form-control input-sm js-datatable-filters-id" id="jobs-form-id" placeholder="Job ID" value="<%= filters.id %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-queue">Queue</label>
              <input type="text" class="form-control input-sm js-datatable-filters-queue" id="jobs-form-queue" placeholder="Queue" value="<%= filters.queue %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-worker">Worker</label>
              <input type="text" class="form-control input-sm js-datatable-filters-worker" id="jobs-form-worker" placeholder="Worker" value="<%= filters.worker %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-path">Task</label>
              <input type="text" class="form-control input-sm js-datatable-filters-path" id="jobs-form-path" placeholder="Task" value="<%= filters.path %>">
            </div>
            <div class="form-group">
              <select class="form-control input-sm js-datatable-filters-status" id="jobs-form-status">

                <option <%= filters.status==""?"selected='selected'":"" %> value="">-statuses-</option>
                <% _.each(["queued", "started", "success", "retry", "timeout", "interrupt", "cancel", "failed"], function(k) { %>
                  <option <%= filters.status==k?"selected='selected'":"" %> value="<%= k %>"><%= k %></option>
                <% }) %>
              </select>
            </div>
            <!--
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div
            -->
            <button type="submit" class="btn btn-default js-datatable-filters-submit input-sm" style="padding:5px">OK</button>

          </form>

          <div class="pull-right js-jobs-groupactions">
            <br/>
            <button type="submit" class="btn btn-warning input-sm js-jobs-groupaction" data-action="requeue" style="padding:5px"><span class='glyphicon glyphicon-refresh'></span> Requeue these jobs</button>
            &nbsp;
            <button type="submit" class="btn btn-danger input-sm js-jobs-groupaction" data-action="cancel" style="padding:5px"><span class='glyphicon glyphicon-remove-circle'></span> Cancel these jobs</button>
          </div>

        </div>

        <div class="container">


          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>


      <footer>
        <div class="row">
          <div class="col-lg-12">

          </div>
        </div>

      </footer>


    </div>


    <!-- build:js scripts/amd-app.js -->
    <script data-main="/static/js/config" src="/static/js/vendor/require.js"></script>
    <!-- endbuild -->


  </body>
</html>
