{% extends "base.html" %}
{% block content %}
<h1>Account Management</h1>

{% if let Some(msg) = message %}
<div class="flash flash-ok">{{ msg }}</div>
{% endif %}

<div class="card">
    <h3>Change My Password</h3>
    <form action="/accounts/change-own-password" method="post" class="form-row">
        <input type="password" name="current_password" placeholder="Current password" required>
        <input type="password" name="new_password" placeholder="New password" required minlength="4">
        <button type="submit" class="btn-ok">Update</button>
    </form>
</div>

<div class="card">
    <h3>Create Account</h3>
    <form action="/accounts/create" method="post" class="form-row">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <label>
            <input type="checkbox" name="is_superuser"> Superuser
        </label>
        <button type="submit" class="btn-ok">Create</button>
    </form>
</div>

<div class="card">
    <h3>Existing Accounts</h3>
    <table class="table">
        <thead>
            <tr>
                <th>Username</th>
                <th>Role</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for acct in accounts %}
            <tr>
                <td>{{ acct.username }}</td>
                <td>
                    {% if acct.is_superuser %}
                    <span class="tag tag-admin">Superuser</span>
                    {% else %}
                    <span class="tag">User</span>
                    {% endif %}
                </td>
                <td>
                    <div class="actions" style="gap:0.25rem">
                        <form action="/accounts/set-password" method="post" style="display:inline">
                            <input type="hidden" name="id" value="{{ acct.id }}">
                            <input type="password" name="new_password" placeholder="New password" required minlength="4" style="width:140px;padding:0.25rem 0.5rem;font-size:0.8rem">
                            <button type="submit" class="btn-sm">Set</button>
                        </form>
                        <form action="/accounts/delete" method="post" style="display:inline"
                              onsubmit="return confirm('Delete account {{ acct.username }}?')">
                            <input type="hidden" name="id" value="{{ acct.id }}">
                            <button type="submit" class="btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}