{% extends 'admin/base.html' %}
{% block title %}{{ t('profile.title') }}{% endblock %}
{% block content %}

<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

<div class="page-header--with-action">
    <div class="page-header__content">
        <h2>👤 {{ t('profile.title') }}</h2>
    </div>
    <button type="submit" class="btn btn-primary">💾 {{ t('profile.save_profile') }}</button>
</div>


        
        <div class="role-info">
            {{ t('profile.your_role') }} <strong>{{ t('users.role_' + current_user.role) }}</strong>
            · {{ t('profile.member_since') }} {{ current_user.created_at|format_date }}
        </div>

        <!-- Public Profile -->
        <div class="settings-section">
            <h3>✍️ {{ t('profile.author_profile') }}</h3>
            <div class="help-text section-subtitle">{{ t('profile.author_help') }}</div>
            
            <div class="form-group">
                <label for="display_name">{{ t('profile.display_name') }}</label>
                <input type="text" id="display_name" name="display_name" class="input-medium"
                       value="{{ current_user.display_name or '' }}" 
                       placeholder="{{ current_user.username }}">
                <div class="help-text">{{ t('profile.display_name_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="bio">{{ t('profile.bio') }}</label>
                <textarea id="bio" name="bio" placeholder="{{ t('profile.bio_placeholder') }}">{{ current_user.bio or '' }}</textarea>
                <div class="help-text">{{ t('profile.bio_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="avatar_url">{{ t('profile.avatar_url') }}</label>
                <div class="flex gap-2 items-center">
                    <input type="text" id="avatar_url" name="avatar_url" 
                           value="{{ current_user.avatar_url or '' }}" 
                           placeholder="{{ t('profile.avatar_placeholder') }}" class="flex-1" readonly>
                    <button type="button" class="btn-pick-image" onclick="pickProfileImage()">📷 {{ t('common.choose') }}</button>
                </div>
                {% if current_user.avatar_url %}
                <div class="profile-avatar-wrap" id="avatarWrap">
                    <img src="{{ current_user.avatar_url }}" alt="Avatar" class="profile-avatar-preview" id="avatarPreview">
                    <button type="button" class="profile-avatar-remove" onclick="clearAvatar()" title="{{ t('common.remove') }}">✕</button>
                </div>
                {% endif %}
                <div class="help-text">{{ t('profile.avatar_help') }}</div>
            </div>
        </div>

        <!-- Author Links (AEO) -->
        <div class="settings-section">
            <h3>🔗 {{ t('profile.author_links') }}</h3>
            <div class="help-text section-subtitle">{{ t('profile.author_links_help') }}</div>
            
            <div class="form-group">
                <label for="linkedin_url">{{ t('profile.linkedin_url') }}</label>
                <input type="url" id="linkedin_url" name="linkedin_url" 
                       value="{{ current_user.linkedin_url or '' }}" 
                       placeholder="https://linkedin.com/in/yourprofile">
            </div>
            
            <div class="form-group">
                <label for="website_url">{{ t('profile.website_url') }}</label>
                <input type="url" id="website_url" name="website_url" 
                       value="{{ current_user.website_url or '' }}" 
                       placeholder="https://yoursite.com">
            </div>
            
            <div class="form-group">
                <label for="github_url">{{ t('profile.github_url') }}</label>
                <input type="url" id="github_url" name="github_url" 
                       value="{{ current_user.github_url or '' }}" 
                       placeholder="https://github.com/yourprofile">
            </div>
        </div>

        <!-- Account Settings -->
        <div class="settings-section">
            <h3>🔒 {{ t('profile.account_settings') }}</h3>
            
            <div class="form-group">
                <label>{{ t('profile.username') }}</label>
                <input type="text" value="{{ current_user.username }}" disabled class="input-medium">
                <div class="help-text">{{ t('profile.username_unchangeable') }}</div>
            </div>
            
            <div class="form-group">
                <label for="email">{{ t('profile.email') }}</label>
                <input type="email" id="email" name="email" value="{{ current_user.email }}" class="input-medium">
            </div>
            
            <div class="form-group">
                <label for="admin_language">🌍 {{ t('profile.admin_language') }}</label>
                {% set _eff_lang = demo_pref_language or current_user.admin_language %}
                <select id="admin_language" name="admin_language">
                    {% for lang in available_languages %}
                    <option value="{{ lang.code }}" {% if _eff_lang == lang.code %}selected{% endif %}>{{ lang.name }}</option>
                    {% endfor %}
                </select>
                <div class="help-text">{{ t('profile.admin_language_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="admin_theme">🎨 {{ t('profile.admin_theme') }}</label>
                {% set _eff_theme = demo_pref_theme or current_user.admin_theme %}
                <select id="admin_theme" name="admin_theme">
                    <option value="light" {% if _eff_theme == 'light' %}selected{% endif %}>☀️ {{ t('profile.theme_light') }}</option>
                    <option value="dark" {% if _eff_theme == 'dark' %}selected{% endif %}>🌙 {{ t('profile.theme_dark') }}</option>
                    <option value="system" {% if (_eff_theme or 'system') == 'system' %}selected{% endif %}>💻 {{ t('profile.theme_system') }}</option>
                </select>
                <div class="help-text">{{ t('profile.admin_theme_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="current_password">🔑 {{ t('profile.current_password') }}</label>
                <input type="password" id="current_password" name="current_password" placeholder="{{ t('profile.current_password_placeholder') }}" autocomplete="current-password" class="input-medium">
                <div class="help-text">{{ t('profile.current_password_help') }}</div>
            </div>
            
            <div class="form-group">
                <label for="new_password">{{ t('profile.new_password') }}</label>
                <input type="password" id="new_password" name="new_password" placeholder="{{ t('profile.new_password_placeholder') }}" autocomplete="new-password" class="input-medium">
            </div>
            
            <div class="form-group">
                <label for="confirm_password">{{ t('profile.confirm_password') }}</label>
                <input type="password" id="confirm_password" name="confirm_password" placeholder="{{ t('profile.confirm_password_placeholder') }}" autocomplete="new-password" class="input-medium">
                <div class="help-text">{{ t('profile.password_help') }}</div>
            </div>
        </div>

</form>

{% if settings.get('twofa_site_enabled', '') == '1' %}
<div class="settings-section mt-4">
    <h3>🔐 {{ t('twofa.title') }}</h3>
    <div class="help-text section-subtitle">{{ t('twofa.profile_help') }}</div>
    {% if current_user.twofa_enabled %}
    <p>✅ {{ t('twofa.status_on') }}</p>
    <form method="POST" action="{{ url_for('twofa_disable') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group">
            <label for="twofa_current_password">{{ t('twofa.disable_password_label') }}</label>
            <input type="password" id="twofa_current_password" name="current_password"
                   class="input-medium" required autocomplete="current-password">
            <div class="mt-2">
                <button type="submit" class="btn btn-secondary">{{ t('twofa.btn_disable') }}</button>
            </div>
        </div>
    </form>
    {% else %}
    <p>{{ t('twofa.status_off') }}</p>
    <a href="{{ url_for('twofa_setup') }}" class="btn btn-primary mt-3">{{ t('twofa.btn_enable') }}</a>
    {% endif %}
</div>
{% endif %}

<script>
function clearAvatar() {
    document.getElementById('avatar_url').value = '';
    var wrap = document.getElementById('avatarWrap');
    if (wrap) wrap.remove();
}

function pickProfileImage() {
    /* Shared picker from admin-image-picker.js — unified search + pagination.
       The duplicated fallback modal that used to live here is gone. */
    openImagePicker(function(url) {
        document.getElementById('avatar_url').value = url;
        // Update or create preview
        var wrap = document.getElementById('avatarWrap');
        if (wrap) {
            wrap.querySelector('img').src = url;
        } else {
            var container = document.getElementById('avatar_url').closest('.form-group');
            var helpText = container.querySelector('.help-text');
            wrap = document.createElement('div');
            wrap.className = 'profile-avatar-wrap';
            wrap.id = 'avatarWrap';
            wrap.innerHTML = '<img src="' + url + '" alt="Avatar" class="profile-avatar-preview" id="avatarPreview">' +
                '<button type="button" class="profile-avatar-remove" onclick="clearAvatar()" title="{{ t("common.remove") }}">✕</button>';
            container.insertBefore(wrap, helpText);
        }
    });
}
</script>
{% endblock %}