mailova/app/templates/showcase.html

{% extends "base.html" %}
{% set lang = lang if lang is defined else 'zh' %}
{% block title %}{{ profile_user.username }} {{ 'showcase.title'|t(lang) }}{% endblock %}
{% block nav %}{% endblock %}
{% block content %}
<div class="section-header">
    <h1>📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
</div>

{% set has_content = (sent_all|length + received_all|length) > 0 %}
{% if not has_content %}
<div class="empty-state">
    <p>{{ 'showcase.empty'|t(lang) }}</p>
</div>
{% else %}

<div class="tabs" id="tabs">
    <button class="tab active" onclick="switchTab('sent')">{{ 'showcase.tab_sent'|t(lang) }} ({{ sent_all|length }})</button>
    <button class="tab" onclick="switchTab('received')">{{ 'showcase.tab_received'|t(lang) }} ({{ received_all|length }})</button>
</div>

<div id="tab-sent" class="tab-panel">
{% if mode == 'flat' %}
    <div class="showcase-grid">
    {% for pc in sent_all %}
        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
            <div class="showcase-card-body">
                <strong>{{ pc.card_number }}</strong>
                <div class="showcase-card-meta">
                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% else %}
    {% for g in profile_groups %}
    {% if g.sent %}
    <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
    <div class="showcase-grid">
        {% for pc in g.sent %}
        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
            <div class="showcase-card-body">
                <strong>{{ pc.card_number }}</strong>
                <div class="showcase-card-meta">
                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endfor %}
{% endif %}
</div>

<div id="tab-received" class="tab-panel" style="display:none">
{% if mode == 'flat' %}
    <div class="showcase-grid">
    {% for pc in received_all %}
        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
            <div class="showcase-card-body">
                <strong>{{ pc.card_number }}</strong>
                <div class="showcase-card-meta">
                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% else %}
    {% for g in profile_groups %}
    {% if g.received %}
    <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
    <div class="showcase-grid">
        {% for pc in g.received %}
        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
            <div class="showcase-card-body">
                <strong>{{ pc.card_number }}</strong>
                <div class="showcase-card-meta">
                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endfor %}
{% endif %}
</div>
{% endif %}

<!-- Lightbox -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
    <button class="lightbox-prev" onclick="event.stopPropagation();navLightbox(-1)">‹</button>
    <button class="lightbox-next" onclick="event.stopPropagation();navLightbox(1)">›</button>
    <div class="lightbox-content" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="">
        <div id="lightbox-number" class="lightbox-number"></div>
    </div>
</div>

<script>
var cards = [];
document.querySelectorAll('.showcase-card').forEach(function(el) {
    cards.push({ front: el.dataset.front, number: el.dataset.number });
});
var currentIndex = 0;

function openLightbox(el) {
    currentIndex = cards.findIndex(function(c) { return c.number === el.dataset.number; });
    showLightbox();
    document.getElementById('lightbox').style.display = 'flex';
}
function showLightbox() {
    var c = cards[currentIndex];
    document.getElementById('lightbox-img').src = c.front;
    document.getElementById('lightbox-number').textContent = c.number;
}
function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; }
function navLightbox(dir) { currentIndex = (currentIndex + dir + cards.length) % cards.length; showLightbox(); }
document.addEventListener('keydown', function(e) {
    if (document.getElementById('lightbox').style.display !== 'flex') return;
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowLeft') navLightbox(-1);
    if (e.key === 'ArrowRight') navLightbox(1);
});
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 %}