{% extends "full_layout.html" %}

{% block title %}Auth0 Accounts{% endblock %}

{% block content %}
  <section>
    <h1>Auth0 Accounts</h1>
    <div class="table-filterer">
      <ul id="account-filters"
          class="table-filter-list">
        <li><a id="list-blocked-accounts"
               href="{{ url_for('.list', status='blocked') }}">
          Blocked
        </a></li>
        <li><a id="list-all-accounts"
               href="{{ url_for('.list') }}">
          All
        </a></li>
      </ul>
      <form id="account-search-form"
            class="table-search-form"
            action="{{ url_for('.list') }}"
            method="GET">
        <input type="search" id="account-search-query-field"
               name="account_query"
               placeholder="Search by Name or Email"
               {% if account_query %}value="{{ account_query }}"{% endif %}/>
        <input type="submit" value="Search"/>
      </form>
    </div>
    <table id="accounts-table">
      <thead>
      <tr>
        <th class="account-name">Name</th>
        <th class="account-email">Email</th>
        <th class="account-status">Status</th>
      </tr>
      </thead>
      <tbody>
      {% for account in accounts %}
        <tr>
          <td class="account-name">{{ account.name }}</td>
          <td class="account-email">{{ account.email }}</td>
          <td class="account-status {{ account.status|lower }}">{{ account.status }}</td>
        </tr>
      {% else %}
        <tr>
          <td class="table-no-data-notice" colspan="3">
            <p>No results to show.</p>
            <p>Try changing search parameters.</p>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% if accounts|length > 0 %}
      <div class="table-paginator">
        <p class="table-paginator-summary">
          Showing
          <strong>{{ accounts.start() + 1 }}&ndash;{{ accounts|length }}</strong>
          of
          <strong>{{ accounts.total() }}</strong>
          results
        </p>
        <p class="table-page-navigator">
          <span class_="inactive">&lt;</span>
          <strong>1</strong>
          <span class_="inactive">&gt;</span>
        </p>
        <form id="accounts-table-page-size"
              method="GET"
              action="{{ url_for('.list') }}">
          <select name="page_size" class='page-size-selector'>
            <option value="25" selected>25 / Page</option>
            <option value="50">50 / Page</option>
            <option value="100">100 / Page</option>
          </select>
          <input type="submit" value="Repaginate"/>
        </form>
        <form id="paginator-go-to"
              method="GET"
              action="{{ url_for('.list') }}">
          <label for="page">Go to</label>
          <input type="text" name="page" class="paginator-go-to-field"/>
          <input type="submit" value="Page"/>
        </form>
      </div>
    {% endif %}
  </section>
{% endblock %}