{% extends "views/administration/base.html" %}
{% block inner %}
<h3>Users</h3>

<button 
    onclick="document.getElementById('create-user-form').reset(); document.getElementById('create-user-modal').showModal()"
    id="create-user">Create new user</button>

<input 
    type="text" id="username" name="username"
    hx-get="/administration/users"
    hx-target="#users > tbody"
    hx-swap="innerHTML"
    hx-select="table > tbody > tr"
    hx-trigger="input changed delay:500ms"
    placeholder="Search..."
/>
<table id="users">
    <thead>
        <th>Username</th>
        <th>Privileges</th>
        <th>Action</th>
    </thead>
    <tbody>
        {%- for user in users %}
        <tr>
            <th>{{ user.username }}</th>
            <th>{%- if user.admin -%}
                Admin
                {%- else -%}
                User
                {%- endif -%}
            <th>
                {%- if user.id != current_user_id -%}
                <a hx-delete="/administration/users/{{ user.id }}"
                   hx-target="closest tr"
                >Remove</a>
                {%- else -%}
                Current user
                {%- endif -%}
            </th>
        </tr>
        {% endfor -%}

        {%- if next_page_query %}
        <tr 
            hx-get="/administration/users?{{ next_page_query }}"
            hx-trigger="revealed"
            hx-swap="outerHTML"
            hx-select="table > tbody > tr"
        ></tr>
        {% endif %}
    </tbody>
</table>

<dialog id="create-user-modal">
  <article>
    <header>
      <button 
        aria-label="Close" 
        rel="prev" 
        onclick="document.getElementById('create-user-modal').close()"
        class="close-button"></button>
      <h5>Create User</h5>
    </header>
    <div class="content">
        <form id="create-user-form">
            <fieldset>
                <label>
                    Username
                    <input name="username"
                           placeholder="Username"
                           />
                </label>
                <label>
                    Admin
                    <input name="admin"
                           type="checkbox"
                           />
                </label>
                <label>
                    Password
                    <input type="password"
                           name="password"
                           placeholder="Password"
                           />
                </label>
                <label>
                    Confirm password
                    <input type="password"
                           name="password-confirm"
                           placeholder="Password"
                           />
                </label>
            </fieldset>

            <input type="submit"
                   value="Create user"
                   />
        </form>
    </div>
  </article>
</dialog>

{% endblock %}