{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- 页面标题区域 -->
    <div class="page-header">
        <h1>提示词模板库</h1>
        <p class="subtitle">选择适合您需求的专业模板</p>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
        <div class="category-item {% if current_category == '全部' %}active{% endif %}">
            <i class="fas fa-th-large"></i>
            <a href="{{ url_for('prompts.list', category='全部') }}">全部模板</a>
        </div>
        {% for category, info in categories.items() %}
        <div class="category-item {% if current_category == category %}active{% endif %}">
            <i class="{{ info.icon }}"></i>
            <a href="{{ url_for('prompts.list', category=category) }}">
                {{ category }}
                <span class="template-count">{{ info.templates|length }}</span>
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索模板..." id="templateSearch">
        </div>
        <div class="view-toggle">
            <button class="view-btn active" data-view="grid">
                <i class="fas fa-th-large"></i>
            </button>
            <button class="view-btn" data-view="list">
                <i class="fas fa-list"></i>
            </button>
        </div>
    </div>

    <!-- 模板列表 -->
    <div class="template-grid" id="templateContainer">
        {% for template in templates %}
        <div class="template-card" data-category="{{ template.category }}">
            <div class="card-header">
                <i class="{{ categories[template.category].icon if template.category in categories }}"></i>
                <h3>{{ template.name }}</h3>
            </div>
            <div class="card-body">
                <p class="description">{{ template.description }}</p>
                <div class="tags">
                    <span class="tag industry">
                        <i class="fas fa-building"></i>
                        {{ template.industry }}
                    </span>
                    <span class="tag profession">
                        <i class="fas fa-user-tie"></i>
                        {{ template.profession }}
                    </span>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn-preview" onclick="previewTemplate('{{ template.id }}')">
                    <i class="fas fa-eye"></i> 预览
                </button>
                <button class="btn-use" onclick="useTemplate('{{ template.id }}')">
                    <i class="fas fa-plus"></i> 使用模板
                </button>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
        {% if page > 1 %}
        <a href="{{ url_for('prompts.list', page=page-1, category=current_category) }}" class="page-btn">
            <i class="fas fa-chevron-left"></i> 上一页
        </a>
        {% endif %}
        
        <div class="page-numbers">
            {% for p in range(1, total_pages + 1) %}
            <a href="{{ url_for('prompts.list', page=p, category=current_category) }}" 
               class="page-number {% if p == page %}active{% endif %}">
                {{ p }}
            </a>
            {% endfor %}
        </div>
        
        {% if has_next %}
        <a href="{{ url_for('prompts.list', page=page+1, category=current_category) }}" class="page-btn">
            下一页 <i class="fas fa-chevron-right"></i>
        </a>
        {% endif %}
    </div>
</div>

<!-- 模板预览模态框 -->
<div class="modal" id="previewModal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="modal-body"></div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
:root {
    --primary-color: #2563eb;
    --secondary-color: #3b82f6;
    --background-color: #f8fafc;
    --text-color: #1e293b;
    --border-color: #e2e8f0;
    --hover-color: #dbeafe;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.subtitle {
    color: #64748b;
    font-size: 1.1rem;
}

.category-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding: 1rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.category-item {
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 3px var(--shadow-color);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px var(--shadow-color);
}

.category-item.active {
    background: var(--primary-color);
    color: white;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.template-card {
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: all 0.3s ease;
    overflow: hidden;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--shadow-color);
}

.card-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-header i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.card-body {
    padding: 1.25rem;
}

.description {
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag.industry {
    background: #dbeafe;
    color: #1e40af;
}

.tag.profession {
    background: #dcfce7;
    color: #166534;
}

.card-footer {
    padding: 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-preview, .btn-use {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-preview {
    background: #f1f5f9;
    color: var(--text-color);
}

.btn-use {
    background: var(--primary-color);
    color: white;
}

.btn-preview:hover {
    background: #e2e8f0;
}

.btn-use:hover {
    background: var(--secondary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .template-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .category-nav {
        padding: 0.5rem;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.template-card {
    animation: fadeIn 0.5s ease-out;
}
</style>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 搜索功能
    const searchInput = document.getElementById('templateSearch');
    const templateContainer = document.getElementById('templateContainer');
    const templateCards = templateContainer.getElementsByClassName('template-card');

    searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        
        Array.from(templateCards).forEach(card => {
            const title = card.querySelector('h3').textContent.toLowerCase();
            const description = card.querySelector('.description').textContent.toLowerCase();
            
            if (title.includes(searchTerm) || description.includes(searchTerm)) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    });

    // 视图切换
    const viewButtons = document.querySelectorAll('.view-btn');
    viewButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            viewButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            const viewType = this.dataset.view;
            templateContainer.className = `template-${viewType}`;
        });
    });

    // 模板预览
    const modal = document.getElementById('previewModal');
    const closeBtn = modal.querySelector('.close');

    window.previewTemplate = function(templateId) {
        modal.style.display = 'block';
        // 这里添加获取模板预览数据的逻辑
    }

    closeBtn.onclick = function() {
        modal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
});
</script>
{% endblock %}