{% extends "manage/base.html" %}

{% block page_title %}{{ super() }} - Users{% endblock %}

{% block site_js %}
  {{ super() }}
  <script src="{{ static('crashstats/js/moment.min.js') }}"></script>
  {% compress js %}
  <script type="text/javascript" src="{{ static('manage/js/users.js') }}"></script>
  {% endcompress %}
{% endblock %}

{% block site_css %}
  {{ super() }}
  <style type="text/css">
  .count {
      display: none;
      margin-bottom: 0;
  }
  p.pleasewait {
      display: none;
      float: right;
      margin-right: 10px;
  }
  input[name="email"] {
      width: 100%;
  }
  form.edit {
      display: none;
  }
  form#filter {
      margin-top: 30px;
  }
  .page-wrapper {
      color: #666;
      font-size: 80%;
  }
  .pagination {
      display: none;
      float: right;
      margin: 0 10px;
  }
  </style>
{% endblock %}

{% block admin_title %}{{ super() }} - Users{% endblock %}

{% block mainbody %}

  <div class="panel">
    <div class="body">

      <p class="pleasewait">
        <img src="{{ static('img/loading.png') }}" alt="Loading animation" />
        Loading...
      </p>

      <h3 class="count"><b></b> Users found
        <span class="page-wrapper">(page <span class="page"></span>)</span>
      </h3>

      <p class="pagination">
        <a href="" class="previous">&larr; Previous</a>
        <a href="" class="next">Next &rarr;</a>
      </p>

      <form action="" id="filter" data-dataurl="{{ url('manage:users_data') }}">
        <input type="hidden" name="page">
        <table class="data-table vertical">
          <thead>
            <tr>
              <th>Email</th>
              <th>Superuser</th>
              <th>Active</th>
              <th>Groups</th>
              <th>Last Login</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td><input type="text" name="email" placeholder="Search by email"></td>
              <td>
                <select name="superuser">
                  <option value="0"></option>
                  <option value="1">true</option>
                  <option value="-1">false</option>
                </select>
              </td>
              <td>
                <select name="active">
                  <option value="0"></option>
                  <option value="1">true</option>
                  <option value="-1">false</option>
                </select>
              </td>
              <td>
                <select name="group">
                  <option value=""></option>
                  {% for group in all_groups %}
                  <option value="{{ group.pk }}">{{ group.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>&nbsp;</td>
              <td><input type="submit" value="Filter">
                  <input type="button" class="reset" value="Reset">
              </td>
            </tr>
          </tfoot>
          <tbody>
          </tbody>
        </table>
      </form>

    </div>
  </div>

{% endblock %}
