{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="space-y-8 pb-28">
        <div class="min-w-0">
            <div class="flex items-center justify-between gap-4 min-w-0">
                <h1 class="text-3xl font-bold text-white min-w-0 truncate">User Settings</h1>
                <div class="flex items-center flex-shrink-0 ml-auto">
                    {% include 'menu_toggle.html' %}
                </div>
            </div>
            <p class="text-slate-500 text-sm mt-1">Manage your account credentials and profile.</p>
        </div>

        <form id="user-settings-form" method="POST" class="glass-panel p-8 rounded-3xl space-y-6" data-settings-form>
            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Username</label>
                <input type="text" name="username" value="{{ user.username }}" required
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
            </div>

            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Email</label>
                <input type="email" name="email" value="{{ user.email or '' }}"
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="you@example.com">
            </div>

            <hr class="border-white/5">

            <p class="text-slate-500 text-sm">Leave password fields blank to keep your current password.</p>

            <div class="space-y-2">
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Current Password</label>
                <input type="password" name="current_password"
                    class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                    placeholder="Required to change password">
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">New Password</label>
                    <input type="password" name="new_password"
                        class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
                </div>
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Confirm Password</label>
                    <input type="password" name="confirm_password"
                        class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
                </div>
            </div>

        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/settings-form.js') }}"></script>
{% endblock %}