{% extends "base.html" %}
{% block title %}展示管理 - 明信片管理器{% endblock %}
{% block content %}
<div class="section-header">
    <div class="detail-title-row">
        <a href="/profiles" class="btn btn-back">←</a>
        <h1>展示管理</h1>
    </div>
</div>

<div class="form-card">
    <h3 style="margin-bottom:.75rem">全局展示设置</h3>
    <form method="post" action="/showcase/manage">
        <label>展示页面模式</label>
        <select name="showcase_mode">
            <option value="profile" {% if user.showcase_mode == 'profile' %}selected{% endif %}>按 Profile 分类</option>
            <option value="flat" {% if user.showcase_mode == 'flat' %}selected{% endif %}>全部合并</option>
        </select>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存全局设置</button>
        </div>
    </form>
    <p class="form-hint" style="margin-top:.5rem;font-size:.8rem;color:var(--text-muted)">
        公开展示页地址：<a href="/u/{{ user.username }}" target="_blank">/u/{{ user.username }}</a>
    </p>
</div>

<div style="margin-top:1.5rem">
    <h2 style="font-size:1rem;margin-bottom:1rem">各 Profile 展示设置</h2>
    {% if profiles %}
    {% for p in profiles %}
    {% set pc_list = profile_cards.get(p.id, []) %}
    <div class="showcase-profile" style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-bottom:.75rem">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
            <strong>{{ p.nickname }}</strong>
            <span class="badge" style="{% if p.showcase_enabled %}background:var(--sent){% else %}background:var(--text-muted){% endif %}">{% if p.showcase_enabled %}展示中{% else %}未开启{% 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">开启展示</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">展示内容</label>
                <select name="showcase_visible" onchange="this.form.submit()">
                    <option value="both" {% if p.showcase_visible == 'both' %}selected{% endif %}>发出 + 收到</option>
                    <option value="sent" {% if p.showcase_visible == 'sent' %}selected{% endif %}>仅发出</option>
                    <option value="received" {% if p.showcase_visible == 'received' %}selected{% endif %}>仅收到</option>
                </select>
            </div>
        </form>
        {% if p.showcase_enabled and pc_list %}
        <div style="margin-top:.75rem;border-top:1px solid var(--border);padding-top:.75rem">
            <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem">单张明信片展示控制（关闭展示后可单独隐藏）：</p>
            {% for pc in pc_list %}
            <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.3rem;font-size:.8rem">
                <span>{{ pc.card_number }}</span>
                <label class="toggle-switch toggle-sm">
                    <input type="checkbox" name="showcase_hidden" value="1" {% if pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()">
                    <span class="toggle-slider"></span>
                </label>
                {% if pc.showcase_hidden %}<span style="color:var(--text-muted);font-size:.75rem">隐藏</span>{% endif %}
            </form>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <div class="empty-state">
        <p>暂无 Profile，请先创建</p>
    </div>
    {% endif %}
</div>
{% endblock %}