{% extends "base.html" %}
{% block title %}{{ profile.nickname }} 展示设置 - 星笺{% endblock %}
{% block content %}
<div class="section-header">
    <div class="detail-title-row">
        <a href="/settings?tab=showcase" class="btn btn-back">←</a>
        <h1>{{ profile.nickname }} 展示设置</h1>
    </div>
</div>

<div class="form-card">
    <form method="post" action="/profiles/{{ profile.id }}/showcase" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center">
        <div style="display:flex;align-items:center;gap:.5rem">
            <label style="margin:0;font-size:.85rem">开启展示</label>
            <label class="toggle-switch">
                <input type="checkbox" name="showcase_enabled" value="1" {% if profile.showcase_enabled %}checked{% endif %} onchange="this.form.submit()">
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <label style="margin:0;font-size:.85rem">展示内容</label>
            <select name="showcase_visible" onchange="this.form.submit()" style="width:auto">
                <option value="both" {% if profile.showcase_visible == 'both' %}selected{% endif %}>发出 + 收到</option>
                <option value="sent" {% if profile.showcase_visible == 'sent' %}selected{% endif %}>仅发出</option>
                <option value="received" {% if profile.showcase_visible == 'received' %}selected{% endif %}>仅收到</option>
            </select>
        </div>
    </form>
</div>

{% if profile.showcase_enabled and cards %}
<div style="margin-top:1.5rem">
    <h2 style="font-size:1rem;margin-bottom:1rem">单张明信片展示控制</h2>
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem">
        {% for pc in cards %}
        <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem;margin-bottom:.4rem;font-size:.85rem">
            <span>{{ pc.card_number }}</span>
            <span class="badge" style="font-size:.7rem;{% if pc.status == 'sent' %}background:var(--sent){% elif pc.status == 'delivered' %}background:var(--delivered){% else %}background:var(--received){% endif %}">
                {{ {'sent':'寄出','delivered':'送达','received':'收到'}.get(pc.status, pc.status) }}
            </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>
</div>
{% endif %}

{% if not profile.showcase_enabled %}
<div class="empty-state" style="margin-top:2rem">
    <p>开启展示后可控制单张明信片的可见性</p>
</div>
{% endif %}
{% endblock %}