{% extends "base.html" %}

{% block title %}{{ t('profile.edit_title', 'Edit Profile') }} - {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-person-gear"></i> {{ t('profile.edit_title', '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() }}
    {% if form.errors %}
    <div class="alert alert-danger" role="alert">
        <p class="mb-1">{{ t('profile.correct_errors', 'Please correct the errors below.') }}</p>
        <ul class="mb-0">
        {% for field in form if field.errors %}
            {% for error in field.errors %}<li>{{ field.label.text }}: {{ error }}</li>{% endfor %}
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    <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> {{ t('profile.basic_info', 'Basic Info') }}</div>
                <div class="card-body">
                    {% if field_config.display_name %}
                    <div class="mb-3">
                        {{ form.display_name.label(class="form-label") }}
                        {{ form.display_name(class="form-control", placeholder=t('profile.display_name_placeholder', 'Your display name')) }}
                    </div>
                    {% endif %}
                    <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>
                    {% if field_config.bio %}
                    <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 {{ t('profile.characters', 'characters') }}</small>
                    </div>
                    {% endif %}
                    {% if field_config.location %}
                    <div class="mb-3">
                        {{ form.location.label(class="form-label") }}
                        {{ form.location(class="form-control", placeholder=t('profile.location_placeholder', 'City, Country')) }}
                    </div>
                    {% endif %}
                    {% if field_config.website %}
                    <div class="mb-3">
                        {{ form.website.label(class="form-label") }}
                        {{ form.website(class="form-control", placeholder="https://...") }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Avatar -->
        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-image"></i> {{ t('profile.avatar', 'Avatar') }}</div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        {% if avatar %}
                            <img src="{{ avatar }}" alt="{{ t('profile.current_avatar', '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">{{ t('profile.or_upload_avatar', '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>{{ t('profile.avatar_help', '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> {{ t('profile.remove_avatar', 'Remove Avatar') }}</button>
                    {% endif %}
                </div>
            </div>

            {% if field_config.show_email or field_config.date_of_birth %}
            <!-- Privacy -->
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-shield"></i> {{ t('profile.privacy', 'Privacy') }}</div>
                <div class="card-body">
                    {% if field_config.show_email %}
                    <div class="mb-3 form-check">
                        {{ form.show_email(class="form-check-input") }}
                        {{ form.show_email.label(class="form-check-label") }}
                    </div>
                    {% endif %}
                    <div class="mb-3 form-check">
                        {{ form.public_watch_optout(class="form-check-input") }}
                        {{ form.public_watch_optout.label(class="form-check-label") }}
                        <div class="form-text">{{ form.public_watch_optout.description }}</div>
                    </div>
                    {% if field_config.date_of_birth %}
                    <div class="mb-3">
                        {{ form.date_of_birth.label(class="form-label") }}
                        {{ form.date_of_birth(class="form-control") }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Security -->
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-shield-lock"></i> {{ t('profile.account_security', 'Account Security') }}</div>
                <div class="card-body">
                    <a href="{{ url_for('profile.change_password') }}" class="btn btn-outline-secondary btn-sm w-100 mb-2">
                        <i class="bi bi-key"></i> {{ t('profile.change_password', 'Change Password') }}
                    </a>
                    <a href="{{ url_for('profile.security_questions') }}" class="btn btn-outline-secondary btn-sm w-100 mb-2">
                        <i class="bi bi-question-circle"></i> {{ t('profile.security_questions', 'Security Questions') }}
                        <span class="text-muted">{{ t('profile.for_recovery', '(for password recovery)') }}</span>
                    </a>
                    <a href="{{ url_for('profile.ssh_keys') }}" class="btn btn-outline-secondary btn-sm w-100">
                        <i class="bi bi-terminal"></i> {{ t('profile.ssh_keys', 'SSH Keys') }}
                        <span class="text-muted">{{ t('profile.ssh_login_help', '(password-free SSH login)') }}</span>
                    </a>
                </div>
            </div>
        </div>

        {% if field_config.signature %}
        <!-- Signature -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-pen"></i> {{ t('profile.signature_label', '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 {{ t('profile.characters', 'characters') }}</small>
                </div>
            </div>
        </div>
        {% endif %}

        {% if field_config.tagline %}
        <!-- FTN Tagline -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-quote"></i> {{ t('profile.tagline_label', '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>

        <!-- Echomail / Netmail identity -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-fingerprint"></i> {{ t('profile.mail_identity', 'Echomail / Netmail Identity') }}</div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form.real_name.label(class="form-label") }}
                        {{ form.real_name(class="form-control", maxlength="100") }}
                        {% if form.real_name.description %}
                        <small class="text-muted">{{ form.real_name.description }}</small>
                        {% endif %}
                    </div>
                    <div class="mb-1">
                        {{ form.echomail_name_pref.label(class="form-label") }}
                        {{ form.echomail_name_pref(class="form-select") }}
                    </div>
                    {% if form.echomail_name_pref.description %}
                    <small class="text-muted">{{ form.echomail_name_pref.description }}</small>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-translate"></i> {{ t('profile.language_preferences', 'Language Preferences') }}</div>
                <div class="card-body">
                    {{ form.language.label(class="form-label") }}
                    {{ form.language(class="form-select") }}
                    {% for error in form.language.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
                </div>
            </div>
        </div>

        <!-- Theme -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-palette"></i> {{ t('profile.theme', 'Theme') }}</div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form.theme_id.label(class="form-label") }}
                        {{ form.theme_id(class="form-select") }}
                    </div>
                    {# Real confusion found live (Pi3 screenshot): shown
                       unconditionally with only a small caption saying
                       it's Command-Deck-only, this looked like a real,
                       working setting for whatever theme happened to be
                       selected (e.g. Graphite Teal) -- nav_position has
                       no effect on any theme's layout except Command
                       Deck's own movable rail, so the field is hidden
                       entirely unless that's the one currently picked,
                       updating live as the Theme select changes. #}
                    <div class="mb-3" id="navPositionField" style="display:none;">
                        {{ form.nav_position.label(class="form-label") }}
                        {{ form.nav_position(class="form-select") }}
                        {% if form.nav_position.description %}
                        <div class="form-text">{{ form.nav_position.description }}</div>
                        {% endif %}
                    </div>
                    <script>
                    (function() {
                        var COMMAND_DECK_THEME_ID = {{ (themes | selectattr('name', 'equalto', 'command-deck') | map(attribute='id') | first | default(0)) | tojson }};
                        var themeSelect = document.getElementById('theme_id');
                        var navField = document.getElementById('navPositionField');
                        function sync() {
                            var picked = parseInt(themeSelect.value, 10);
                            navField.style.display = (picked === COMMAND_DECK_THEME_ID) ? '' : 'none';
                        }
                        if (themeSelect && navField && COMMAND_DECK_THEME_ID) {
                            themeSelect.addEventListener('change', sync);
                            sync();
                        }
                    })();
                    </script>
                    {% 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> {{ t('profile.preview_all_themes', 'Preview All Themes') }}</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Terminal Capabilities -->
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-terminal"></i> {{ t('profile.terminal_capabilities', 'Terminal Capabilities') }}</div>
                <div class="card-body">
                    <div class="mb-1">
                        {{ form.sixel_mode.label(class="form-label") }}
                        {{ form.sixel_mode(class="form-select") }}
                    </div>
                    {% if form.sixel_mode.description %}
                    <small class="text-muted">{{ form.sixel_mode.description }}</small>
                    {% endif %}
                    <div class="mb-1 mt-3">
                        {{ form.cursor_style.label(class="form-label") }}
                        {{ form.cursor_style(class="form-select") }}
                    </div>
                    {% if form.cursor_style.description %}
                    <small class="text-muted">{{ form.cursor_style.description }}</small>
                    {% endif %}
                    <div class="mb-1 mt-3">
                        {{ form.msg_scan_pref.label(class="form-label") }}
                        {{ form.msg_scan_pref(class="form-select") }}
                    </div>
                    {% if form.msg_scan_pref.description %}
                    <small class="text-muted">{{ form.msg_scan_pref.description }}</small>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if custom_fields_list %}
    <div class="card mb-3">
        <div class="card-header"><i class="bi bi-card-list"></i> {{ t('profile.additional_info', 'Additional Info') }}</div>
        <div class="card-body">
            <div class="row g-2">
            {% for cf in custom_fields_list %}
                <div class="col-md-6 mb-2">
                    <label class="form-label small">{{ cf.label }}{% if cf.required %} <span class="text-danger">*</span>{% endif %}</label>
                    {% set val = custom_values.get(cf.id, '') %}
                    {% if cf.field_type == 'textarea' %}
                        <textarea name="cf_{{ cf.name }}" class="form-control form-control-sm" rows="3">{{ val }}</textarea>
                    {% elif cf.field_type == 'select' %}
                        {% set choices = cf.choices | from_json if cf.choices else [] %}
                        <select name="cf_{{ cf.name }}" class="form-select form-select-sm">
                            <option value="">{{ t('profile.select', '-- select --') }}</option>
                            {% for c in choices %}
                            <option value="{{ c }}" {% if val == c %}selected{% endif %}>{{ c }}</option>
                            {% endfor %}
                        </select>
                    {% else %}
                        <input type="{{ 'number' if cf.field_type == 'number' else 'url' if cf.field_type == 'url' else 'text' }}"
                               name="cf_{{ cf.name }}" class="form-control form-control-sm" value="{{ val }}">
                    {% endif %}
                </div>
            {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <div class="d-flex gap-2 mb-3">
        {{ form.submit(class="btn btn-primary") }}
        <a href="{{ url_for('profile.index') }}" class="btn btn-secondary">{{ t('profile.cancel', 'Cancel') }}</a>
        <a href="{{ url_for('profile.change_password') }}" class="btn btn-primary"><i class="bi bi-key"></i> {{ t('profile.change_password', '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 %}