{% extends "base.html" %}

{% block title %}模板管理{% endblock %}

{% block extra_css %}
<style>
/* 现代化全局模板管理页面 - 优化布局 */
.templates-hero {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--spacing-lg) var(--spacing-lg);
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg) calc(-1 * var(--spacing-lg));
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.templates-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.04) 0%, transparent 50%);
    animation: templatesFloat 20s ease-in-out infinite;
}

@keyframes templatesFloat {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.02) rotate(1deg); }
}

.templates-hero h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--ink-strong);
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

.templates-hero p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
}

.templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--glass-shadow);
}

.templates-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* 现代化输入框和表单样式 - 白色背景优化 */
.glass-input, input[type="text"], input[type="email"], input[type="password"],
textarea, select {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.glass-input:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    background: #ffffff;
}

.glass-input::placeholder, input::placeholder, textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 400;
}

/* 表单标签样式 */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* 复选框样式 */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: #0f172a;
    cursor: pointer;
}

/* 表单组样式 - 优化间距 */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* 选择框特殊样式 */
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* 搜索和过滤区域样式 - 优化紧凑布局 */
.search-filter-container {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow);
    align-items: center;
    flex-wrap: wrap;
}

.search-input-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.search-input {
    padding: 10px 14px;
    transition: all 0.3s ease;
}

.search-input:focus {
    padding: 10px 14px;
}

.filter-wrapper {
    min-width: 160px;
}

.filter-select {
    min-width: 100%;
    padding: 10px 14px;
}

.refresh-btn {
    white-space: nowrap;
    min-width: auto;
    padding: 10px 16px;
}
</style>
{% endblock %}

{% block content %}
<div class="templates-hero">
    <h1>模板管理</h1>
    <p>管理和创建PPT模板</p>
</div>

<div style="max-width: 1400px; margin: 0 auto; padding: var(--spacing-md);">
    <!-- Header Actions -->
    <div class="templates-header">
        <div>
            <div style="display: flex; align-items: center; gap: 12px;">
                <h2 style="color: var(--text-primary); margin: 0; font-size: 1.3rem; font-weight: 600;">模板管理</h2>
                <a href="https://landppt-template.52yyds.top" target="_blank" style="color: var(--text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s ease;">模板广场</a>
            </div>
            <p style="color: var(--text-secondary); margin: 4px 0 0 0; font-size: 0.95rem;">创建、编辑和管理您的PPT模板</p>
        </div>
        <div class="templates-actions">
            <button id="createTemplateBtn" class="btn btn-primary">
                新建模板
            </button>
            <button id="generateWithAIBtn" class="btn btn-success">
                AI生成模板
            </button>
            <input type="file" id="importTemplateInput" accept=".html,.json" style="display: none;">
            <button id="importTemplateBtn" class="btn btn-secondary">
                导入模板
            </button>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="search-filter-container">
        <div class="search-input-wrapper">
            <input type="text" id="searchInput" placeholder="搜索模板名称..." class="glass-input search-input">
        </div>
        <div class="filter-wrapper">
            <select id="tagFilter" class="glass-input filter-select">
                <option value="">所有标签</option>
            </select>
        </div>
        <button id="refreshBtn" class="btn btn-info refresh-btn"><i class="fas fa-sync-alt"></i> 刷新</button>
    </div>

    <!-- Templates Grid -->
    <div id="templatesGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--spacing-lg);">
        <!-- Templates will be loaded here -->
    </div>

    <!-- Pagination -->
    <div id="paginationContainer" style="margin-top: var(--spacing-lg);">
        <div class="pagination-wrapper">
            <div class="pagination-info">
                <span id="paginationInfo">显示第 1-12 项，共 0 项</span>
            </div>
            <div class="pagination-controls">
                <button id="prevPageBtn" class="btn btn-sm btn-secondary" disabled>
                    <i class="fas fa-chevron-left"></i> 上一页
                </button>
                <div id="pageNumbers" class="page-numbers">
                    <!-- Page numbers will be generated here -->
                </div>
                <button id="nextPageBtn" class="btn btn-sm btn-secondary" disabled>
                    下一页 <i class="fas fa-chevron-right"></i>
                </button>
            </div>
            <div class="pagination-size">
                <label for="pageSizeSelect">每页显示：</label>
                <select id="pageSizeSelect" class="glass-input" style="width: auto; min-width: 80px;">
                    <option value="6" selected>6</option>
                    <option value="12">12</option>
                    <option value="24">24</option>
                    <option value="48">48</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Loading indicator -->
    <div id="loadingIndicator" class="loading-container" style="display: none;">
        <div class="loading-spinner"></div>
        <p class="loading-text">加载中...</p>
    </div>
</div>

<!-- Create/Edit Template Modal -->
<div id="templateModal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 850px; width: 90%;">
        <div class="modal-header">
            <h2 id="modalTitle">新建模板</h2>
            <button class="close" id="closeModal" type="button">&times;</button>
        </div>
        <div class="modal-body">
            <form id="templateForm">
                <div class="form-group">
                    <label for="templateName">模板名称 *</label>
                    <input type="text" id="templateName" name="template_name" required>
                </div>

                <div class="form-group">
                    <label for="templateDescription">描述</label>
                    <textarea id="templateDescription" name="description" rows="3"></textarea>
                </div>

                <div class="form-group">
                    <label for="templateTags">标签 (用逗号分隔)</label>
                    <input type="text" id="templateTags" name="tags" placeholder="例如: 商务, 简约, 现代">
                </div>

                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                        <input type="checkbox" id="isDefault" name="is_default">
                        设为默认模板
                    </label>
                </div>

                <div class="form-group">
                    <label for="htmlTemplate">HTML模板代码 *</label>
                    <textarea id="htmlTemplate" name="html_template" required rows="15" style="font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; font-size: 13px; line-height: 1.4;"></textarea>
                </div>

                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                    <button type="button" id="previewTemplateBtn" class="btn btn-secondary"><i class="fas fa-eye"></i> 预览</button>
                    <button type="button" id="cancelBtn" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> 保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- AI Generation Modal -->
<div id="aiGenerationModal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 850px; width: 90%;">
        <div class="modal-header">
            <h2>AI生成模板</h2>
            <button class="close" id="closeAIModal" type="button">&times;</button>
        </div>
        <div class="modal-body">
            <!-- 表单区域 -->
            <div id="aiFormContainer">
                <form id="aiGenerationForm">
                    <div class="form-group">
                        <label for="aiPrompt">描述您想要的模板风格 *</label>
                        <textarea id="aiPrompt" name="prompt" required rows="4" placeholder="例如: 创建一个现代简约风格的商务PPT模板，使用蓝色主色调，包含卡片式布局..."></textarea>
                    </div>

                    <div class="form-group">
                        <label for="aiTemplateName">模板名称 *</label>
                        <input type="text" id="aiTemplateName" name="template_name" required>
                    </div>

                    <div class="form-group">
                        <label for="aiTemplateDescription">描述</label>
                        <textarea id="aiTemplateDescription" name="description" rows="2"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="aiTemplateTags">标签 (用逗号分隔)</label>
                        <input type="text" id="aiTemplateTags" name="tags" placeholder="AI生成, 现代, 商务">
                    </div>

                    <!-- 图片上传区域 -->
                    <div class="form-group">
                        <label>参考图片 (可选)</label>
                        <div class="image-upload-section">
                            <!-- 生成模式选择 -->
                            <div class="generation-mode-selector">
                                <div class="mode-option">
                                    <input type="radio" id="mode_text_only" name="generation_mode" value="text_only" checked>
                                    <label for="mode_text_only">纯文本生成</label>
                                </div>
                                <div class="mode-option">
                                    <input type="radio" id="mode_reference_style" name="generation_mode" value="reference_style">
                                    <label for="mode_reference_style">参考风格 (借鉴图片设计元素)</label>
                                </div>
                                <div class="mode-option">
                                    <input type="radio" id="mode_exact_replica" name="generation_mode" value="exact_replica">
                                    <label for="mode_exact_replica">1:1还原 (尽可能准确复制图片设计)</label>
                                </div>
                            </div>

                            <!-- 图片上传区域 -->
                            <div id="imageUploadArea" class="image-upload-area" style="display: none;">
                                <div class="upload-dropzone" id="uploadDropzone">
                                    <div class="upload-content">
                                        <div class="upload-icon"><i class="fas fa-image"></i></div>
                                        <div class="upload-text">
                                            <p><strong>拖拽图片到此处</strong> 或 <button type="button" class="upload-btn" id="selectImageBtn">选择文件</button></p>
                                            <p class="upload-hint">支持 JPG、PNG、WebP 格式，最大 10MB</p>
                                        </div>
                                    </div>
                                    <input type="file" id="imageFileInput" accept="image/jpeg,image/jpg,image/png,image/webp" style="display: none;">
                                </div>

                                <!-- 图片预览区域 -->
                                <div id="imagePreviewContainer" class="image-preview-container" style="display: none;">
                                    <div class="image-preview-header">
                                        <h4><i class="fas fa-image"></i> 上传的参考图片</h4>
                                        <button type="button" class="remove-image-btn" id="removeImageBtn" title="移除图片">✕</button>
                                    </div>
                                    <div class="image-preview-content">
                                        <img id="imagePreview" class="image-preview" alt="参考图片预览">
                                        <div class="image-info">
                                            <div class="image-filename" id="imageFilename"></div>
                                            <div class="image-size" id="imageSize"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                        <button type="button" id="cancelAIBtn" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-success">生成</button>
                    </div>
                </form>
            </div>

            <!-- AI生成进度区域 -->
            <div id="aiGenerationProgress" style="display: none;">
                <div class="ai-generation-header">
                    <h3 style="margin: 0; color: var(--text-primary); font-size: 1.3rem;">AI正在生成您的模板...</h3>
                    <div class="generation-status">
                        <div class="status-indicator">
                            <div class="status-dot"></div>
                            <span id="statusText">正在分析需求...</span>
                        </div>
                    </div>
                </div>

                <div style="margin: 20px 0; text-align: center; color: #6c757d; font-size: 0.9rem;">
                    <span>⏳ 预计需要 30-60 秒，请耐心等待...</span>
                </div>

                <div class="generation-actions" style="margin-top: 20px; text-align: center;">
                    <button type="button" id="cancelGenerationBtn" class="btn btn-secondary">取消生成</button>
                </div>
            </div>

            <!-- 生成完成区域 -->
            <div id="aiGenerationComplete" style="display: none;">
                <div class="completion-header">
                    <h3 style="margin: 0; color: #28a745; font-size: 1.2rem;">模板生成完成！</h3>
                </div>

                <!-- 模板预览区域 -->
                <div class="template-preview-section" style="margin: 20px 0;">
                    <div class="preview-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <h4 style="margin: 0; color: #333;">模板预览</h4>
                        <button type="button" id="fullPreviewBtn" class="btn btn-sm btn-outline-primary">全屏预览</button>
                    </div>
                    <div id="generatedTemplatePreview" style="border: 1px solid #ddd; border-radius: 8px; height: 300px; overflow: hidden; background: #f8f9fa;">
                        <iframe id="generatedTemplateIframe" style="width: 100%; height: 100%; border: none; transform: scale(0.5); transform-origin: 0 0; width: 200%; height: 200%;"></iframe>
                    </div>
                </div>

                <!-- LLM响应查看区域 -->
                <div class="llm-response-section" style="margin: 20px 0;">
                    <div class="response-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <h4 style="margin: 0; color: #333;">AI思考过程</h4>
                        <button type="button" id="toggleLLMResponseBtn" class="btn btn-sm btn-outline-info"><i class="fas fa-file-alt"></i> 查看完整响应</button>
                    </div>
                    <div id="llmResponseContainer" style="display: none;">
                        <div class="response-content" style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px; max-height: 400px; overflow-y: auto;">
                            <div class="response-tabs" style="margin-bottom: 15px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center;">
                                <div>
                                    <span style="color: #495057; font-weight: 600;">原始响应</span>
                                </div>
                                <div>
                                    <button type="button" id="copyResponseBtn" class="btn btn-sm btn-outline-secondary" title="复制响应内容"><i class="fas fa-copy"></i> 复制</button>
                                </div>
                            </div>
                            <div id="rawResponse" class="response-tab-content">
                                <pre style="background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 6px; font-size: 13px; line-height: 1.4; margin: 0; white-space: pre-wrap; word-wrap: break-word; position: relative;"><code id="rawResponseCode"></code></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 继续对话调整区域 -->
                <div class="template-adjustment-section" style="margin: 20px 0;">
                    <h4 style="margin: 0 0 10px 0; color: #333;">继续调整模板</h4>
                    <div class="adjustment-input-group" style="display: flex; gap: 10px;">
                        <input type="text" id="adjustmentInput" class="form-control" placeholder="请描述您希望如何调整模板，例如：改变颜色、调整布局、修改字体等..." style="flex: 1;">
                        <button type="button" id="adjustTemplateBtn" class="btn btn-primary">调整</button>
                    </div>
                    <div id="adjustmentProgress" style="display: none; margin-top: 10px;">
                        <div class="progress" style="height: 4px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
                        </div>
                        <small class="text-muted">正在调整模板...</small>
                    </div>
                </div>

                <div class="completion-actions" style="margin-top: 20px; text-align: center; display: flex; gap: 10px; justify-content: center;">
                    <button type="button" id="saveGeneratedTemplateBtn" class="btn btn-success"><i class="fas fa-save"></i> 保存模板</button>
                    <button type="button" id="regenerateTemplateBtn" class="btn btn-secondary">重新生成</button>
                    <button type="button" id="closeCompletionBtn" class="btn btn-secondary">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div id="previewModal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 95%; width: 95%;">
        <div class="modal-header">
            <h2>模板预览</h2>
            <button class="close" id="closePreviewModal" type="button">&times;</button>
        </div>
        <div class="modal-body" style="text-align: center; padding: 16px;">
            <iframe id="previewFrame" style="width: 1280px; height: 720px; border: 1px solid #ddd; transform: scale(0.8); transform-origin: top left; margin: 0 auto;"></iframe>
        </div>
    </div>
</div>

<style>
/* 动画定义 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 加载指示器样式 */
.loading-container {
    text-align: center;
    padding: 60px 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    margin: 40px 0;
}

.loading-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top: 4px solid #0f172a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    animation: pulse 2s ease-in-out infinite;
}

/* 现代化模态框样式 - 优化背景和定位 */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: modalFadeIn 0.3s ease-out;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* 预览模态框需要更高的z-index */
#previewModal {
    z-index: 1100;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.modal-content {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
    overflow: hidden;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: relative;
    margin: auto;
    min-width: 320px;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 700;
}

.close {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    padding: 6px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
}

.close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.modal-body {
    padding: 24px;
    background: #ffffff;
}

.template-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
}

.template-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #0f172a, #1f2937);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.template-card:hover::before {
    transform: scaleX(1);
}

.template-preview {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    position: relative;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    flex-shrink: 0;
}

.template-preview-iframe {
    width: 1280px;
    height: 720px;
    border: none;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.32);
    transform-origin: center center;
    border-radius: 4px;
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.preview-overlay:hover {
    background: rgba(0, 0, 0, 0.1);
}

.preview-overlay-text {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-overlay:hover .preview-overlay-text {
    opacity: 1;
}

.template-info {
    padding: 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.template-actions {
    padding: 12px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* 现代化标签和徽章样式 */
.tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.06);
    color: #0f172a;
    padding: 4px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.default-badge {
    background: var(--success-gradient);
    color: white;
    padding: 4px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

/* 现代化按钮样式 - 优化间距和一致性 */
.btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-height: 38px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-success {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
}
.btn-success:hover {
    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}
.btn-secondary:hover {
    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-danger {
    background: var(--secondary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}
.btn-danger:hover {
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-warning {
    background: var(--warning-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.btn-warning:hover {
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}
.btn-info:hover {
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    min-width: auto;
    min-height: 32px;
    gap: 4px;
}

/* AI生成进度样式 - 优化背景和可读性 */
.ai-generation-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 18px;
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.generation-status {
    margin-top: 10px;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.status-dot {
    width: 10px;
    height: 10px;
    background: #0f172a;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.ai-response-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    padding: 18px;
    margin: 18px 0;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.response-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.response-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
}

.ai-response-stream {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-response-stream .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #0f172a;
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.completion-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 18px;
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
}

/* 图片上传样式 */
.image-upload-section {
    margin-top: 10px;
}

.generation-mode-selector {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius-md);
    border: 1px solid #e9ecef;
    margin-bottom: 15px;
}

.mode-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.mode-option:last-child {
    margin-bottom: 0;
}

.mode-option:hover {
    background-color: rgba(102, 126, 234, 0.1);
}

.mode-option input[type="radio"] {
    margin: 0 10px 0 0;
    width: 16px;
    height: 16px;
}

.mode-option label {
    cursor: pointer;
    font-size: 0.95rem;
    margin: 0;
    flex: 1;
}

.mode-option input[type="radio"]:checked + label {
    color: #0f172a;
    font-weight: 600;
}

.image-upload-area {
    margin-top: 15px;
}

.upload-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: var(--border-radius-md);
    padding: 40px 20px;
    text-align: center;
    background: #fafbfc;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: #0f172a;
    background: rgba(0, 0, 0, 0.04);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.upload-icon {
    font-size: 3rem;
    color: #9ca3af;
}

.upload-text p {
    margin: 0;
    color: var(--text-secondary);
}

.upload-text p:first-child {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.upload-btn {
    background: none;
    border: none;
    color: #0f172a;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}

.upload-btn:hover {
    color: #5a67d8;
}

.upload-hint {
    font-size: 0.9rem;
    color: #6b7280;
}

.image-preview-container {
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: white;
}

.image-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.image-preview-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.remove-image-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.remove-image-btn:hover {
    background: #dc2626;
}

.image-preview-content {
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.image-preview {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--border-radius-sm);
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.image-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-filename {
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}

.image-size {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* LLM响应展示样式 */
.llm-response-section {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-md);
    background: white;
    overflow: hidden;
}

.response-header {
    background: #f8f9fa;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
}

.response-header h4 {
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
}

.response-tabs {
    display: flex;
    background: #f8f9fa;
    margin: -15px -15px 15px -15px;
    padding: 0 15px;
}

.response-tab {
    background: none;
    border: none;
    padding: 12px 16px;
    margin-right: 10px;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.response-tab:hover {
    color: #495057;
    background: rgba(0, 123, 255, 0.1);
}

.response-tab.active {
    color: #007bff;
    border-bottom-color: #007bff;
    background: rgba(0, 123, 255, 0.1);
}

.response-tab-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.formatted-response-content {
    line-height: 1.6;
    color: #333;
}

.formatted-response-content h1,
.formatted-response-content h2,
.formatted-response-content h3,
.formatted-response-content h4 {
    color: #2c3e50;
    margin: 20px 0 10px 0;
    font-weight: 600;
}

.formatted-response-content h1 { font-size: 1.4rem; }
.formatted-response-content h2 { font-size: 1.2rem; }
.formatted-response-content h3 { font-size: 1.1rem; }
.formatted-response-content h4 { font-size: 1rem; }

.formatted-response-content p {
    margin: 10px 0;
    line-height: 1.6;
}

.formatted-response-content ul,
.formatted-response-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.formatted-response-content li {
    margin: 5px 0;
}

.formatted-response-content code {
    background: #f1f3f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
    color: #d73a49;
}

.formatted-response-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 15px 0;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.4;
}

.formatted-response-content blockquote {
    border-left: 4px solid #007bff;
    margin: 15px 0;
    padding: 10px 15px;
    background: #f8f9fa;
    color: #495057;
    font-style: italic;
}

/* 响应式设计 - 优化移动端体验 */
@media (max-width: 1200px) {
    #templatesGrid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
        gap: var(--spacing-md) !important;
    }

    .search-filter-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .search-input-wrapper, .filter-wrapper {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .templates-hero {
        padding: var(--spacing-md) var(--spacing-md);
    }

    .templates-hero h1 {
        font-size: 1.5rem;
    }

    .templates-hero p {
        font-size: 1rem;
    }

    .templates-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .templates-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
    }

    .templates-actions .btn {
        width: 100%;
        justify-content: center;
    }

    #templatesGrid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    .template-preview {
        height: 180px !important;
    }

    .template-preview-iframe {
        transform: translate(-50%, -50%) scale(0.26) !important;
    }

    .template-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .btn-sm {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .modal-content {
        width: 95% !important;
        margin: 10px;
        max-height: calc(100vh - 20px) !important;
    }

    .modal-body {
        padding: 16px;
    }

    .search-filter-container {
        padding: var(--spacing-sm);
    }

    .modal {
        align-items: flex-start !important;
        padding: 10px !important;
    }
}

/* 分页样式 */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-numbers {
    display: flex;
    gap: 4px;
}

.page-number {
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-sm);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 36px;
    text-align: center;
}

.page-number:hover {
    background: #f8f9fa;
    border-color: #0f172a;
}

.page-number.active {
    background: #0f172a;
    color: white;
    border-color: #0f172a;
}

.page-number.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pagination-size label {
    margin: 0;
    font-weight: 500;
}

.pagination-size select {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* 响应式分页 */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .pagination-controls {
        justify-content: center;
    }

    .pagination-info,
    .pagination-size {
        text-align: center;
    }

    .page-numbers {
        justify-content: center;
        flex-wrap: wrap;
    }
}
</style>


<script type="module" src="/static/js/pages/globalMasterTemplates.js"></script>



{% endblock %}