{% extends "admin/base.html" %}

{% block title %}{{ target_user.username }} — Admin — Porchlight{% endblock %}

{% block admin_content %}
<h1>{{ target_user.username }}</h1>
<p>ID: <code>{{ target_user.userid }}</code> · Created {{ target_user.created_at.strftime('%Y-%m-%d %H:%M') }}</p>

<div class="admin-detail">

<section>
    <h2>Profile</h2>
    <form hx-post="/admin/users/{{ target_user.userid }}/profile" hx-target="#profile-status" hx-swap="innerHTML">
        <div>
            <label for="given_name">Given name</label>
            <input type="text" id="given_name" name="given_name" value="{{ target_user.given_name or '' }}" maxlength="255">
        </div>
        <div>
            <label for="family_name">Family name</label>
            <input type="text" id="family_name" name="family_name" value="{{ target_user.family_name or '' }}" maxlength="255">
        </div>
        <div>
            <label for="preferred_username">Display name</label>
            <input type="text" id="preferred_username" name="preferred_username" value="{{ target_user.preferred_username or '' }}" maxlength="255">
        </div>
        <div>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" value="{{ target_user.email or '' }}" maxlength="255">
        </div>
        <div>
            <label for="phone_number">Phone number</label>
            <input type="tel" id="phone_number" name="phone_number" value="{{ target_user.phone_number or '' }}" maxlength="50">
        </div>
        <div>
            <label for="picture">Picture URL</label>
            <input type="url" id="picture" name="picture" value="{{ target_user.picture or '' }}" maxlength="2048">
        </div>
        <div>
            <label for="locale">Locale</label>
            <input type="text" id="locale" name="locale" value="{{ target_user.locale or '' }}" maxlength="20" placeholder="e.g. en, sv-SE">
        </div>
        <div id="profile-status"></div>
        <button type="submit">Save profile</button>
    </form>
</section>

<section>
    <h2>Groups</h2>
    <div id="groups-section">
        <form hx-post="/admin/users/{{ target_user.userid }}/groups" hx-target="#groups-status" hx-swap="innerHTML">
            <div id="group-list">
                {% for group in target_user.groups %}
                <span class="group-tag">{{ group }}</span>
                {% endfor %}
            </div>
            <div>
                <label for="groups">Groups (comma-separated)</label>
                <input type="text" id="groups" name="groups" value="{{ target_user.groups|join(', ') }}">
            </div>
            <div id="groups-status"></div>
            <button type="submit">Update groups</button>
        </form>
    </div>
</section>

<section>
    <h2>Credentials</h2>
    <div id="credentials-section">
        <h3>Password</h3>
        {% if has_password %}
        <p>Password is set.
            <button class="btn-danger" hx-delete="/admin/users/{{ target_user.userid }}/credentials/password"
                    hx-target="#credentials-section" hx-swap="innerHTML"
                    hx-confirm="Remove this user's password?">Remove password</button>
        </p>
        {% else %}
        <p>No password set.</p>
        {% endif %}

        <h3>Security keys</h3>
        {% if webauthn_credentials %}
        <ul>
            {% for cred in webauthn_credentials %}
            <li>
                {{ cred.device_name or "Security key" }}
                <small>(added {{ cred.created_at.strftime('%Y-%m-%d') }})</small>
                <button class="btn-danger" hx-delete="/admin/users/{{ target_user.userid }}/credentials/webauthn/{{ cred.credential_id|b64encode }}"
                        hx-target="#credentials-section" hx-swap="innerHTML"
                        hx-confirm="Remove this security key?">Remove</button>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p>No security keys registered.</p>
        {% endif %}
    </div>
</section>

<section>
    <h2>Actions</h2>
    <div id="actions-section">
        <div>
            {% if target_user.active %}
            <button class="btn-secondary" hx-post="/admin/users/{{ target_user.userid }}/deactivate"
                    hx-target="#actions-section" hx-swap="innerHTML">Deactivate user</button>
            {% else %}
            <button class="btn-secondary" hx-post="/admin/users/{{ target_user.userid }}/activate"
                    hx-target="#actions-section" hx-swap="innerHTML">Activate user</button>
            {% endif %}
        </div>
        <div>
            <button class="btn-secondary" hx-post="/admin/users/{{ target_user.userid }}/invite"
                    hx-target="#invite-result" hx-swap="innerHTML">Generate invite link</button>
            <div id="invite-result"></div>
        </div>
        <div>
            <button class="btn-danger" hx-delete="/admin/users/{{ target_user.userid }}"
                    hx-target="body" hx-confirm="Permanently delete user {{ target_user.username }}? This cannot be undone.">Delete user</button>
        </div>
    </div>
</section>

</div>
{% endblock %}