{% extends "base.html" %}

{% block title %}Profile · Tusk{% endblock %}

{% block content %}
<main class="dash-page" style="flex:1;overflow:auto">
    <div style="max-width:720px;margin:0 auto">
        <div class="dash-head">
            <div>
                <div class="dash-title">Profile</div>
                <div class="dash-desc">Account info, password, and membership.</div>
            </div>
        </div>

        <!-- Account info -->
        <div class="card" style="padding:22px;margin-bottom:18px">
            <h2 style="font-family:var(--serif);font-size:22px;line-height:1.1;margin-bottom:16px">Account information</h2>

            <form hx-post="/api/profile/" hx-swap="none">
                <div class="field">
                    <label>Username</label>
                    <input disabled value="{{ profile_user.username if profile_user else '' }}"
                           style="opacity:.7">
                </div>
                <div class="field">
                    <label>Display name</label>
                    <input name="display_name"
                           value="{{ profile_user.display_name if profile_user and profile_user.display_name else '' }}"
                           placeholder="Your name">
                </div>
                <div class="field">
                    <label>Email</label>
                    <input name="email" type="email"
                           value="{{ profile_user.email if profile_user and profile_user.email else '' }}"
                           placeholder="you@example.com">
                </div>
                <div style="display:flex;justify-content:flex-end;margin-top:8px">
                    <button type="submit" class="btn btn-brand">Save changes</button>
                </div>
            </form>
        </div>

        <!-- Change password -->
        <div class="card" style="padding:22px;margin-bottom:18px">
            <h2 style="font-family:var(--serif);font-size:22px;line-height:1.1;margin-bottom:16px">Change password</h2>

            <form x-data="{ newPw: '', confirmPw: '', currentPw: '' }"
                  hx-post="/api/profile/password" hx-swap="none"
                  @htmx:after-request.camel="if ($event.detail.successful) { newPw = ''; confirmPw = ''; currentPw = ''; $el.reset() }"
                  @submit="if (!currentPw) { tuskToast('Current password required', 'warning'); $event.preventDefault(); return; }
                           if (!newPw) { tuskToast('New password required', 'warning'); $event.preventDefault(); return; }
                           if (newPw.length < 6) { tuskToast('Password must be at least 6 characters', 'warning'); $event.preventDefault(); return; }
                           if (newPw !== confirmPw) { tuskToast('Passwords do not match', 'warning'); $event.preventDefault(); return; }">

                <div class="field">
                    <label>Current password</label>
                    <input name="current_password" type="password" x-model="currentPw" placeholder="••••••••">
                </div>
                <div class="field">
                    <label>New password</label>
                    <input name="new_password" type="password" x-model="newPw" placeholder="••••••••">
                    <span style="font-size:11px;color:var(--fg-4)">Minimum 8 characters; must contain at least one letter and one digit.</span>
                </div>
                <div class="field">
                    <label>Confirm new password</label>
                    <input type="password" x-model="confirmPw" placeholder="••••••••">
                </div>
                <div style="display:flex;justify-content:flex-end;margin-top:8px">
                    <button type="submit" class="btn" style="background:var(--green);color:#fff;border-color:var(--green)">Change password</button>
                </div>
            </form>
        </div>

        <!-- Groups & permissions -->
        <div class="card" style="padding:22px">
            <h2 style="font-family:var(--serif);font-size:22px;line-height:1.1;margin-bottom:16px">Groups &amp; permissions</h2>

            <div style="margin-bottom:18px">
                <div style="font-size:12px;color:var(--fg-3);margin-bottom:8px;font-weight:500">Member of</div>
                <div style="display:flex;flex-wrap:wrap;gap:6px">
                    {% if profile_groups %}
                        {% for g in profile_groups %}
                        <span class="chip chip-violet">{{ g.name }}</span>
                        {% endfor %}
                    {% else %}
                        <span style="color:var(--fg-4);font-size:13px">No groups assigned</span>
                    {% endif %}
                </div>
            </div>

            <div>
                <div style="font-size:12px;color:var(--fg-3);margin-bottom:8px;font-weight:500">Permissions</div>
                <div style="display:flex;flex-wrap:wrap;gap:6px">
                    {% if profile_permissions %}
                        {% for p in profile_permissions %}
                        <span class="chip chip-neutral">{{ p }}</span>
                        {% endfor %}
                    {% else %}
                        <span style="color:var(--fg-4);font-size:13px">No permissions</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}