{% extends "_layout" %}

{% block content %}
<div class="vstack gap-3 m-3">
  <h3>Create new user</h3>
  <form method="POST" action="/create_user">
    <div class="mb-3">
      <label for="user" class="form-label">Username</label>
      <input type="username" class="form-control" id="user" name="username">
    </div>
    <div class="mb-3">
      <label for="pass" class="form-label">Password</label>
      <input type="password" class="form-control" id="pass" name="password">
    </div>
    <div class="mb-3">
      <label for="role" class="form-label">Role</label>
      <select class="form-select" aria-label="User Role" name="role" id="role">
        <option selected value="user">User</option>
        <option value="admin">Admin</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Create new user</button>
  </form>
  <hr />
  <h3>Edit user</h3>
  <form method="POST" action="/edit_user">
    <div class="mb-3">
      <label for="user" class="form-label">Username</label>
      <select class="form-select" aria-label="User to edit" name="username" id="user">
        {% for user in users %}
        <option value="{{ user }}">{{ user }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="mb-3">
      <label for="pass" class="form-label">Password (leave blank to skip changing)</label>
      <input type="password" class="form-control" id="pass" name="password">
    </div>
    <div class="mb-3">
      <label for="role" class="form-label">Role</label>
      <select class="form-select" aria-label="User Role" name="role" id="role">
        <option selected value="user">User</option>
        <option value="admin">Admin</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Create new user</button>
  </form>
</div>
{% endblock content %}