{% extends "layouts/default.html" %}
{% block head %}
{% with title = "Admin" %}
    {% include "includes/head.html" %}
{% endwith %}
{% endblock %}
{% block content %}
{% include "includes/self-tabs.html" %}
<div class="page-header">
  <h1>Admin</h1>
  <span class="htmx-indicator loading-indicator" id="accounts-loading-indicator">
      <img src="/static/img/rings.svg" alt="Loading indicator, a spinning ring"/>
  </span>
</div>
<div class="container flex-container column">
  <div class="row search-container" >
    <input class="form-control search-input enter-trigger" type="search"
           name="query" placeholder="Begin Typing To Search..."
           hx-get="/self/admin/accounts/search"
           hx-trigger="input changed delay:250ms, enterKeyUp, load, response from:.success-button"
           hx-target="#accounts-table"
           hx-indicator="#accounts-loading-indicator"
           hx-swap="innerHTML"
    >
  </div>

  <div id="accounts-table" aria-live="polite">
  </div>
</div>

{% endblock %}
