{% extends "base.html" %}

{% block title %}猫咪图鉴 - 猫猫天堂{% endblock %}

{% block content %}
<div class="gallery-page">
    <div class="page-header">
        <h2>📖 猫咪图鉴</h2>
        <p class="subtitle">纪念所有入驻天堂的可爱猫咪</p>
    </div>
    
    <div id="gallery-grid" class="gallery-grid">
        <!-- 猫咪卡片将通过JS动态加载 -->
    </div>
    
    <div id="loading" class="loading">加载中...</div>
    
    <div id="empty-message" class="empty-message" style="display: none;">
        <p>还没有公开的猫咪入驻天堂</p>
        <a href="{{ url_for('upload_cat') }}" class="btn btn-primary">成为第一个</a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadGallery();
});

function loadGallery() {
    fetch('/api/gallery')
        .then(response => response.json())
        .then(data => {
            document.getElementById('loading').style.display = 'none';
            
            if (data.cats.length === 0) {
                document.getElementById('empty-message').style.display = 'block';
                return;
            }
            
            const grid = document.getElementById('gallery-grid');
            
            data.cats.forEach(cat => {
                const card = createCatCard(cat);
                grid.appendChild(card);
            });
        })
        .catch(error => {
            console.error('加载失败:', error);
            document.getElementById('loading').textContent = '加载失败，请刷新重试';
        });
}

function createCatCard(cat) {
    const card = document.createElement('div');
    card.className = 'gallery-card';
    
    const coatNames = {
        'orange': '橘猫',
        'black': '黑猫',
        'white': '白猫',
        'gray': '灰猫',
        'calico': '三花',
        'cow': '奶牛',
        'tabby': '狸花',
        'ragdoll': '布偶'
    };
    
    const bodyNames = {
        'slim': '小巧',
        'normal': '正常',
        'chubby': '微胖',
        'round': '圆滚滚'
    };
    
    card.innerHTML = `
        <div class="card-photo">
            ${cat.photo_path ? `<img src="/uploads/${cat.photo_path}" alt="${cat.name}">` : '<div class="no-photo">🐱</div>'}
        </div>
        <div class="card-info">
            <h3>${cat.name}</h3>
            <div class="card-tags">
                <span class="tag">${coatNames[cat.coat_color] || cat.coat_color}</span>
                <span class="tag">${bodyNames[cat.body_type] || cat.body_type}</span>
            </div>
            ${cat.birth_date ? `<p class="card-date">🎂 ${cat.birth_date}</p>` : ''}
            ${cat.death_date ? `<p class="card-date">🕯️ ${cat.death_date}</p>` : ''}
            <p class="card-joined">入驻时间: ${cat.created_at.split('T')[0]}</p>
        </div>
    `;
    
    return card;
}
</script>
{% endblock %}