{% extends "base.html" %}
{% block title %}{{ 'settings.title'|t(user.language) }} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ 'settings.title'|t(user.language) }}</h1>
</div>

<div class="tabs" id="tabs">
    <button class="tab {% if active_tab != 'showcase' %}active{% endif %}" onclick="switchTab('account')">{{ 'settings.tab_account'|t(user.language) }}</button>
    <button class="tab {% if active_tab == 'showcase' %}active{% endif %}" onclick="switchTab('showcase')">{{ 'settings.tab_showcase'|t(user.language) }}</button>
</div>

{% if success %}
<div class="alert alert-success">{{ success }}</div>
{% endif %}
{% if error %}
<div class="alert alert-error">{{ error }}</div>
{% endif %}

<div id="tab-account" class="tab-panel" {% if active_tab == 'showcase' %}style="display:none"{% endif %}>
<div class="form-card">
    <h3 style="margin-bottom:.75rem">{{ 'settings.change_username'|t(user.language) }}</h3>
    <form method="post" action="/settings/change-username">
        <label>{{ 'settings.current_username'|t(user.language) }}</label>
        <input type="text" value="{{ user.username }}" disabled>
        <label>{{ 'settings.new_username'|t(user.language) }}</label>
        <input type="text" name="new_username" required maxlength="64">
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{{ 'settings.change_username'|t(user.language) }}</button>
        </div>
    </form>
</div>

<div class="form-card" style="margin-top:1.5rem">
    <h3 style="margin-bottom:.75rem">{{ 'settings.change_password'|t(user.language) }}</h3>
    <form method="post" action="/settings/change-password">
        <label>{{ 'settings.current_password'|t(user.language) }}</label>
        <input type="password" name="old_password" required>
        <label>{{ 'settings.new_password'|t(user.language) }}</label>
        <input type="password" name="new_password" required>
        <label>{{ 'settings.confirm_password'|t(user.language) }}</label>
        <input type="password" name="confirm_password" required>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{{ 'settings.change_password'|t(user.language) }}</button>
        </div>
    </form>
</div>

<div class="form-card" style="margin-top:1.5rem">
    <h3 style="margin-bottom:.75rem">{{ 'settings.language'|t(user.language) }}</h3>
    <form method="post" action="/settings/language" style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
        <select name="language" style="width:auto">
            <option value="zh" {% if user.language == 'zh' %}selected{% endif %}>{{ 'settings.language_zh'|t(user.language) }}</option>
            <option value="en" {% if user.language == 'en' %}selected{% endif %}>{{ 'settings.language_en'|t(user.language) }}</option>
        </select>
        <button type="submit" class="btn btn-primary btn-sm">{{ 'settings.save'|t(user.language) }}</button>
    </form>
</div>
</div>

<div id="tab-showcase" class="tab-panel" {% if active_tab != 'showcase' %}style="display:none"{% endif %}>
<div class="form-card">
    <h3 style="margin-bottom:.75rem">{{ 'settings.showcase_global'|t(user.language) }}</h3>
    <form method="post" action="/showcase/manage">
        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
            <label style="margin:0;white-space:nowrap">{{ 'settings.showcase_mode'|t(user.language) }}</label>
            <select name="showcase_mode" style="width:auto">
                <option value="profile" {% if user.showcase_mode == 'profile' %}selected{% endif %}>{{ 'settings.mode_profile'|t(user.language) }}</option>
                <option value="flat" {% if user.showcase_mode == 'flat' %}selected{% endif %}>{{ 'settings.mode_flat'|t(user.language) }}</option>
            </select>
            <button type="submit" class="btn btn-primary btn-sm">{{ 'settings.save'|t(user.language) }}</button>
        </div>
    </form>
    <p style="margin-top:.75rem;font-size:.8rem;color:var(--text-muted)">
        {{ 'settings.public_url_label'|t(user.language) }}<a href="/u/{{ user.username }}" target="_blank">/u/{{ user.username }}</a>
    </p>
</div>

{% if profiles %}
<div style="margin-top:1.5rem">
    <h2 style="font-size:1rem;margin-bottom:1rem">{{ 'settings.profiles_showcase'|t(user.language) }}</h2>
    {% for p in profiles %}
    <div class="form-card" style="margin-bottom:.75rem">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem">
            <strong>{{ p.nickname }}</strong>
            <span class="badge">{% if p.showcase_enabled %}{{ 'settings.showcase_on'|t(user.language) }}{% else %}{{ 'settings.showcase_off'|t(user.language) }}{% endif %}</span>
        </div>
        <form method="post" action="/profiles/{{ p.id }}/showcase" style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end">
            <div style="display:flex;flex-direction:column;gap:.25rem">
                <label style="margin:0;font-size:.78rem">{{ 'settings.enable_showcase'|t(user.language) }}</label>
                <label class="toggle-switch">
                    <input type="checkbox" name="showcase_enabled" value="1" {% if p.showcase_enabled %}checked{% endif %} onchange="this.form.submit()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div style="display:flex;flex-direction:column;gap:.25rem">
                <label style="margin:0;font-size:.78rem">{{ 'settings.showcase_content'|t(user.language) }}</label>
                <select name="showcase_visible" onchange="this.form.submit()">
                    <option value="both" {% if p.showcase_visible == 'both' %}selected{% endif %}>{{ 'settings.content_both'|t(user.language) }}</option>
                    <option value="sent" {% if p.showcase_visible == 'sent' %}selected{% endif %}>{{ 'settings.content_sent'|t(user.language) }}</option>
                    <option value="received" {% if p.showcase_visible == 'received' %}selected{% endif %}>{{ 'settings.content_received'|t(user.language) }}</option>
                </select>
            </div>
            <a href="/profiles/{{ p.id }}/showcase" class="btn btn-sm">{{ 'settings.save'|t(user.language) }}</a>
        </form>
    </div>
    {% endfor %}
</div>
{% endif %}
</div>

<script>
function switchTab(name) {
    document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
    event.currentTarget.classList.add('active');
    document.getElementById('tab-' + name).style.display = '';
}
{% if active_tab == 'showcase' %}
document.querySelector('[onclick*="showcase"]').click();
{% endif %}
</script>
{% endblock %}