{% extends "base.html" %}
{% block title %}Staff - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Staff</h1>
            {% if organization %}<p class="rf-lede">For <strong>{{ organization.name }}</strong></p>{% endif %}
        </div>
    </div>
    <p class="hint"><strong>Owner:</strong> full access, including managing staff.
       <strong>Administrator:</strong> full access to subscribers, plans and routers, but cannot manage staff.
       <strong>Support:</strong> can see everything but cannot make changes.</p>

    <table class="rf-cards">
        <thead>
            <tr><th>Username</th><th>Role</th><th><span class="rf-visually-hidden">Actions</span></th></tr>
        </thead>
        <tbody>
        {% for m in memberships %}
            <tr>
                <td data-label="Username" class="rf-primary">{{ m.user.username }}{% if m.user == request.user %} (you){% endif %}</td>
                <td data-label="Role">
                    <form method="post" action="{% url 'staff-role-change' m.pk %}" class="rf-inline-form">
                        {% csrf_token %}
                        <select name="role" aria-label="Role for {{ m.user.username }}">
                            {% for value, label in role_choices %}
                            <option value="{{ value }}" {% if m.role == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" class="rf-button-small">Update</button>
                    </form>
                </td>
                <td class="rf-actions">
                    <form method="post" action="{% url 'staff-2fa-reset' m.pk %}"
                          onsubmit="return confirm('Reset two-factor for {{ m.user.username|escapejs }}? They must set it up again next login.');">
                        {% csrf_token %}
                        <button type="submit" class="small-button">Reset 2FA</button>
                    </form>
                    {% if m.user != request.user %}
                    <form method="post" action="{% url 'staff-remove' m.pk %}"
                          onsubmit="return confirm('Remove {{ m.user.username|escapejs }} from this organization?');">
                        {% csrf_token %}
                        <button type="submit" class="small-button">Remove</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <h2>Add a teammate</h2>
    <p class="hint">This creates their login straight away (there are no email invitations yet).
       Share the username and password with them securely.</p>
    <form method="post" action="{% url 'staff-add' %}">
        {% csrf_token %}
        <label for="{{ add_form.username.id_for_label }}" title="{{ add_form.username.field.widget.attrs.title }}">{{ add_form.username.label }}</label>
        {{ add_form.username }}

        <label for="{{ add_form.password.id_for_label }}" title="{{ add_form.password.field.widget.attrs.title }}">{{ add_form.password.label }}</label>
        {{ add_form.password }}

        <label for="{{ add_form.role.id_for_label }}" title="{{ add_form.role.field.widget.attrs.title }}">{{ add_form.role.label }}</label>
        {{ add_form.role }}

        <div><button type="submit">Add teammate</button></div>
    </form>
{% endblock %}