{% extends "base.html" %}
{% block title %}{{ profile.nickname }} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ profile.nickname }} {{ 'pc_list.title'|t(user.language) }}</h1>
    <a href="/profiles/{{ profile.id }}/postcards/new" class="btn btn-primary">{{ 'pc_list.new'|t(user.language) }}</a>
</div>
<div style="margin-bottom:1rem">
    {% if profile.notes %}
    <div style="padding:.3rem .5rem;font-size:.85rem;color:var(--text-muted)">{{ profile.notes }}</div>
    {% endif %}
</div>
<div class="filter-bar">
    <form method="get" class="form-row">
        <select name="country">
            <option value="">{{ 'pc_list.all_countries'|t(user.language) }}</option>
            {% for c in countries %}
            <option value="{{ c }}" {% if country == c %}selected{% endif %}>{{ c|flag }} {{ c }}</option>
            {% endfor %}
        </select>
        <button type="submit" class="btn">{{ 'pc_list.filter'|t(user.language) }}</button>
    </form>
</div>

<div class="tabs" id="tabs">
    <button class="tab active" onclick="switchTab('sent')">{{ 'pc_list.tab_sent'|t(user.language) }} ({{ sent|length }})</button>
    <button class="tab" onclick="switchTab('received')">{{ 'pc_list.tab_received'|t(user.language) }} ({{ 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="" loading="lazy">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
    </div>
    <div class="postcard-row-info">
        <strong>{{ pc.card_number }}</strong>
        <div class="postcard-row-detail">
            <span>{% if pc.country_from %}{{ pc.country_from|flag }}→{% endif %}{{ pc.country_to|flag }} {{ pc.country_to or '-' }}</span>
            <span>→ {{ pc.recipient_name or '-' }}</span>
        </div>
        <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered'}.get(pc.status) }}</span>
        <span class="postcard-row-date">
            {% if pc.send_time %}{{ pc.send_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}寄出{% endif %}{% endif %}
            {% if pc.arrival_time %}<br>{{ pc.arrival_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}送达{% endif %}{% endif %}
        </span>
    </div>
    {% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
    <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('{{ 'pc_list.confirm_delivered'|t(user.language) }}'))this.submit();">
            <button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_delivered'|t(user.language) }}</button>
        </form>
        {% endif %}
    </div>
</a>
{% endfor %}
{% else %}
<p class="empty">{{ 'pc_list.empty_sent'|t(user.language) }}</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="" loading="lazy">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
    </div>
    <div class="postcard-row-info">
        <strong>{{ pc.card_number }}</strong>
        <div class="postcard-row-detail">
            <span>← {{ pc.sender_name or '-' }}</span>
        </div>
        {% if pc.receive_time %}<span class="postcard-row-date">{{ pc.receive_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}收到{% endif %}</span>{% endif %}
    </div>
    {% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
</a>
{% endfor %}
{% else %}
<p class="empty">{{ 'pc_list.empty_received'|t(user.language) }}</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 %}