{% extends "base.html" %}

{% block title %}Edit Profile - {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-person-gear"></i> Edit Profile</h1>
</div>

{# Avatar-remove form lives OUTSIDE the main profile form. HTML forbids
   nesting <form> tags — browsers auto-close the outer form at the inner
   <form>, which historically dropped the Privacy/Signature/Theme/Submit
   fields out of the profile form entirely. The Remove Avatar button below
   uses the HTML5 `form="remove_avatar_form"` attribute to submit this
   hidden form from its visual position inside the Avatar card. #}
{% if avatar %}
<form id="remove_avatar_form" method="post" action="{{ url_for('profile.remove_avatar') }}" class="d-none">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
</form>
{% endif %}

<form method="post" enctype="multipart/form-data">
    {{ form.hidden_tag() }}

    <div class="row g-3">
        <!-- Basic Info -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><i class="bi bi-person"></i> Basic Info</div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form.display_name.label(class="form-label") }}
                        {{ form.display_name(class="form-control", placeholder="Your display name") }}
                    </div>
                    <div class="mb-3">
                        {{ form.email.label(class="form-label") }}
                        {{ form.email(class="form-control") }}
                        {% for e in form.email.errors %}<div class="text-danger">{{ e }}</div>{% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.bio.label(class="form-label") }}
                        {{ form.bio(class="form-control", rows="4", maxlength="500", id="bio-textarea") }}
                        <small><span id="bio-count">0</span>/500 characters</small>
                    </div>
                    <div class="mb-3">
                        {{ form.location.label(class="form-label") }}
                        {{ form.location(class="form-control", placeholder="City, Country") }}
                    </div>
                    <div class="mb-3">
                        {{ form.website.label(class="form-label") }}
                        {{ form.website(class="form-control", placeholder="https://...") }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Avatar -->
        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-image"></i> Avatar</div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        {% if avatar %}
                            <img src="{{ avatar }}" alt="Current Avatar" class="rounded-circle" style="width:100px;height:100px;object-fit:cover;border:2px solid var(--theme-primary);">
                        {% else %}
                            <i class="bi bi-person-circle" style="font-size:5rem;"></i>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        {{ form.avatar_url.label(class="form-label") }}
                        {{ form.avatar_url(class="form-control", placeholder="https://example.com/avatar.jpg") }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Or Upload Avatar</label>
                        {{ form.avatar_file(class="form-control") }}
                        {% for e in form.avatar_file.errors %}<div class="text-danger">{{ e }}</div>{% endfor %}
                        <small>Max 2MB. JPG, PNG, GIF, WebP allowed.</small>
                    </div>
                    {% if avatar %}
                    <button type="submit" form="remove_avatar_form" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i> Remove Avatar</button>
                    {% endif %}
                </div>
            </div>

            <!-- Privacy -->
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-shield"></i> Privacy</div>
                <div class="card-body">
                    <div class="mb-3 form-check">
                        {{ form.show_email(class="form-check-input") }}
                        {{ form.show_email.label(class="form-check-label") }}
                    </div>
                    <div class="mb-3">
                        {{ form.date_of_birth.label(class="form-label") }}
                        {{ form.date_of_birth(class="form-control") }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Signature -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-pen"></i> Forum Signature</div>
                <div class="card-body">
                    {{ form.signature(class="form-control", rows="3", maxlength="200", id="sig-textarea") }}
                    <small><span id="sig-count">0</span>/200 characters</small>
                </div>
            </div>
        </div>

        <!-- FTN Tagline -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-quote"></i> FTN Tagline</div>
                <div class="card-body">
                    {{ form.tagline(class="form-control", maxlength="160") }}
                    <small class="text-muted">{{ form.tagline.description }}</small>
                </div>
            </div>
        </div>

        <!-- Theme -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-palette"></i> Theme</div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form.theme_id.label(class="form-label") }}
                        {{ form.theme_id(class="form-select") }}
                    </div>
                    {% if themes %}
                    <div class="row g-2">
                        {% for theme in themes %}
                        {% set vars = theme.css_variables | from_json %}
                        <div class="col-md-2 col-4">
                            <div class="p-2 text-center rounded theme-swatch" data-theme-id="{{ theme.id | int }}" style="background-color:{{ vars.get('--theme-bg', '#1a1a1a') }};border:2px solid {{ vars.get('--theme-primary', '#00ff00') }};font-family:monospace;cursor:pointer;">
                                <span style="color:{{ vars.get('--theme-primary', '#00ff00') }};font-size:0.75rem;">{{ theme.display_name }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <script>
                    document.querySelectorAll('.theme-swatch').forEach(function(el) {
                        el.addEventListener('click', function() {
                            document.getElementById('theme_id').value = this.dataset.themeId;
                        });
                    });
                    </script>
                    {% endif %}
                    <div class="mt-2">
                        <a href="{{ url_for('profile.themes') }}" class="btn btn-sm btn-primary"><i class="bi bi-eye"></i> Preview All Themes</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mb-3">
        {{ form.submit(class="btn btn-primary") }}
        <a href="{{ url_for('profile.index') }}" class="btn btn-secondary">Cancel</a>
        <a href="{{ url_for('profile.change_password') }}" class="btn btn-primary"><i class="bi bi-key"></i> Change Password</a>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
function updateCount(textarea, counter) {
    document.getElementById(counter).textContent = document.getElementById(textarea).value.length;
}
document.getElementById('bio-textarea').addEventListener('input', () => updateCount('bio-textarea', 'bio-count'));
document.getElementById('sig-textarea').addEventListener('input', () => updateCount('sig-textarea', 'sig-count'));
// Init counts
updateCount('bio-textarea', 'bio-count');
updateCount('sig-textarea', 'sig-count');
</script>
{% endblock %}