{% extends 'base.html' %}
{% load static %}

{% block title %}Account Settings - Packs{% endblock %}

{% block content %}
    <h1>Account Settings</h1>
    <p><a href="{% url 'profiles:settings' %}"><i class="fas fa-key"></i> Manage API tokens</a></p>

    {% if messages %}
        <ul class="messages">
            {% for message in messages %}
                <li>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    <div class="account-grid">
        <section class="card account-card">
            <h2><i class="fas fa-user"></i> Username</h2>
            <p class="account-current">Current: <strong>{{ request.user.username }}</strong></p>
            <form method="post" action="{% url 'profiles:account' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="username">
                <div class="form-group">
                    {{ username_form.username.errors }}
                    <label for="{{ username_form.username.id_for_label }}">New username</label>
                    {{ username_form.username }}
                </div>
                <button type="submit" class="btn btn-primary">Change username</button>
            </form>
        </section>

        <section class="card account-card">
            <h2><i class="fas fa-envelope"></i> Email</h2>
            <p class="account-current">Current: <strong>{{ request.user.email|default:"none" }}</strong></p>
            <form method="post" action="{% url 'profiles:account' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="email">
                <div class="form-group">
                    {{ email_form.email.errors }}
                    <label for="{{ email_form.email.id_for_label }}">Email (optional — leave empty to clear)</label>
                    {{ email_form.email }}
                </div>
                <button type="submit" class="btn btn-primary">Update email</button>
            </form>
        </section>

        <section class="card account-card">
            <h2><i class="fas fa-lock"></i> Password</h2>
            <form method="post" action="{% url 'profiles:account' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="password">
                {% for field in password_form %}
                    <div class="form-group">
                        {{ field.errors }}
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                    </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary">Change password</button>
            </form>
        </section>

        <section class="card account-card">
            <h2><i class="fas fa-image"></i> Profile picture</h2>
            <div class="avatar-preview">
                {% if request.user.userprofile.avatar %}
                    <img src="{{ request.user.userprofile.avatar_url }}" alt="Current avatar">
                {% else %}
                    <div class="default-avatar large">{{ request.user.username|first|upper }}</div>
                {% endif %}
            </div>
            <form method="post" action="{% url 'profiles:account' %}" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="avatar">
                <div class="form-group">
                    {{ avatar_form.avatar.errors }}
                    <label for="{{ avatar_form.avatar.id_for_label }}">{{ avatar_form.avatar.label }}</label>
                    {{ avatar_form.avatar }}
                </div>
                <button type="submit" class="btn btn-primary">Upload picture</button>
            </form>
        </section>
    </div>
{% endblock %}