{% extends "base.html" %}
{% block title %}{{ profile.nickname }} - Postcard Manager{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ profile.nickname }} 的明信片</h1>
    <a href="/profiles/{{ profile.id }}/postcards/new" class="btn btn-primary">+ 新明信片</a>
</div>
<div class="filter-bar">
    <form method="get" class="form-row">
        <select name="country">
            <option value="">全部国家</option>
            {% for c in countries %}
            <option value="{{ c }}" {% if country == c %}selected{% endif %}>{{ c|flag }} {{ c }}</option>
            {% endfor %}
        </select>
        <button type="submit" class="btn">筛选</button>
    </form>
</div>

<div class="tabs" id="tabs">
    <button class="tab active" onclick="switchTab('sent')">寄出 ({{ sent|length }})</button>
    <button class="tab" onclick="switchTab('received')">收到 ({{ received|length }})</button>
</div>

<div id="tab-sent" class="tab-panel">
{% if sent %}
{% for pc in sent %}
<a href="/postcards/{{ pc.id }}" class="postcard-row">
    <div class="postcard-row-img">
        {% if pc.image_front %}
        <img src="{{ pc.image_front }}" alt="正面">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
    </div>
    <div class="postcard-row-info">
        <strong>{{ pc.card_number }}</strong>
        <span>{{ pc.country|flag }} {{ pc.country or '-' }}</span>
        <span>→ {{ pc.recipient_name or '-' }}</span>
        <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) }}</span>
    </div>
    <div class="postcard-row-action">
        {% if pc.status == 'sent' %}
        <form method="post" action="/postcards/{{ pc.id }}/mark-delivered" onclick="event.preventDefault();event.stopPropagation();if(confirm('确认已送达？'))this.submit();">
            <button type="submit" class="btn btn-sm btn-primary">✓ 标记已送达</button>
        </form>
        {% endif %}
    </div>
</a>
{% endfor %}
{% else %}
<p class="empty">没有寄出的明信片。</p>
{% endif %}
</div>

<div id="tab-received" class="tab-panel" style="display:none">
{% if received %}
{% for pc in received %}
<a href="/postcards/{{ pc.id }}" class="postcard-row">
    <div class="postcard-row-img">
        {% if pc.image_front %}
        <img src="{{ pc.image_front }}" alt="正面">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
    </div>
    <div class="postcard-row-info">
        <strong>{{ pc.card_number }}</strong>
        <span>← {{ pc.sender_name or '-' }}</span>
    </div>
</a>
{% endfor %}
{% else %}
<p class="empty">没有收到的明信片。</p>
{% 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 = '';
}
</script>
{% endblock %}