{% extends 'base.html' %}

{% block title %}图书花园 - 批量导入{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/book-import.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Playfair+Display&display=swap" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="import-container">
    <div class="page-header animate__animated animate__fadeIn">
        <h1 class="fancy-title">图书花园 <span class="subtitle">批量导入</span></h1>
        <a href="{{ url_for('book.book_list') }}" class="btn btn-return">
            <i class="fas fa-arrow-left"></i> 返回图书列表
        </a>
    </div>

    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card animate__animated animate__fadeInUp">
                <div class="card-header">
                    <h4><i class="fas fa-magic sparkle"></i> 添加您的图书收藏</h4>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="form-group file-upload-wrapper">
                            <label for="file" class="elegant-label">选择您的Excel文件</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="file" name="file" accept=".xlsx, .xls" required>
                                <label class="custom-file-label" for="file">点击这里选择文件...</label>
                            </div>
                            <small class="form-text text-muted">支持的文件格式: .xlsx, .xls</small>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg btn-block import-btn">
                            <i class="fas fa-upload"></i> 开始导入
                        </button>
                    </form>

                    <div class="divider">
                        <span class="divider-content"><i class="fas fa-book-open"></i></span>
                    </div>

                    <div class="import-instructions animate__animated animate__fadeIn">
                        <h5 class="instruction-title"><i class="fas fa-leaf"></i> 导入指南</h5>
                        <div class="instruction-content">
                            <p>Excel文件须包含以下字段 (标题行必须与下列完全一致):</p>
                            <ul class="elegant-list">
                                <li class="required-field"><span class="field-name">title</span> - 图书标题 <span class="required-badge">必填</span></li>
                                <li class="required-field"><span class="field-name">author</span> - 作者名称 <span class="required-badge">必填</span></li>
                                <li><span class="field-name">publisher</span> - 出版社</li>
                                <li><span class="field-name">category_id</span> - 分类ID</li>
                                <li><span class="field-name">tags</span> - 标签 (多个标签用逗号分隔)</li>
                                <li><span class="field-name">isbn</span> - ISBN编号</li>
                                <li><span class="field-name">publish_year</span> - 出版年份</li>
                                <li><span class="field-name">description</span> - 图书简介</li>
                                <li><span class="field-name">cover_url</span> - 封面图片URL</li>
                                <li><span class="field-name">stock</span> - 库存数量</li>
                                <li><span class="field-name">price</span> - 价格</li>
                            </ul>
                        </div>

                        <div class="template-download animate__animated animate__pulse animate__infinite animate__slower">
                            <p>不确定如何开始? 下载我们精心准备的模板:</p>
                            <a href="{{ url_for('book.download_template') }}" class="btn download-btn">
                                <i class="fas fa-download"></i> 下载Excel模板
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="floating-elements">
        <div class="snowflake snowflake-1"></div>
        <div class="snowflake snowflake-2"></div>
        <div class="snowflake snowflake-3"></div>
        <div class="snowflake snowflake-4"></div>
        <div class="flower flower-1"></div>
        <div class="flower flower-2"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/book-import.js') }}"></script>
{% endblock %}