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

{% block title %}Edit Profile - {{ exchange.name }}{% endblock %}

{% block content %}
<article>
    <header>
        <h1>Edit Your Profile</h1>
        <p>Update your display name and gift ideas. Your Secret Santa will see this information after matching.</p>
    </header>

    <form method="POST" action="{{ url_for('participant.profile_edit') }}">
        {{ form.hidden_tag() }}

        <div>
            {{ form.name.label }}
            {{ form.name(class="form-control") }}
            {% if form.name.errors %}
            <ul class="field-errors">
                {% for error in form.name.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
            <small>{{ form.name.description }}</small>
        </div>

        <div>
            {{ form.gift_ideas.label }}
            {{ form.gift_ideas(class="form-control") }}
            {% if form.gift_ideas.errors %}
            <ul class="field-errors">
                {% for error in form.gift_ideas.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
            <small>{{ form.gift_ideas.description }}</small>
            <small id="gift-ideas-count">
                {{ (form.gift_ideas.data or '')|length }} / 10,000 characters
            </small>
        </div>

        <div>
            <button type="submit">Save Changes</button>
            <a href="{{ url_for('participant.dashboard', id=exchange.id) }}">Cancel</a>
        </div>
    </form>
</article>

<script>
// Character counter (progressive enhancement)
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.querySelector('textarea[name="gift_ideas"]');
    const counter = document.getElementById('gift-ideas-count');

    if (textarea && counter) {
        textarea.addEventListener('input', function() {
            counter.textContent = this.value.length + ' / 10,000 characters';
        });
    }
});
</script>
{% endblock %}