{% extends "layout.html" %}

{% block title %}上传文件 - 家谱管理系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>上传家谱扫描件</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" enctype="multipart/form-data">
                    <div class="mb-4">
                        <label class="form-label fw-bold">选择文件</label>
                        <input type="file" name="file" class="form-control form-control-lg" required>
                        <div class="form-text mt-2">
                            支持图片 (JPG, PNG) 或 PDF 格式的扫描件。上传后将自动识别页码。
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">手动指定页码 (可选)</label>
                        <div class="input-group">
                            <input type="number" name="manual_page" id="initialPage" class="form-control" placeholder="如不输入则由 OCR 自动识别">
                            <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('initialPage').value = {{ suggested_page }}">
                                提示：第 {{ suggested_page }} 页？
                            </button>
                        </div>
                        <div class="form-text mt-1 text-muted">
                            建议值为当前数据库最大页码 + 1。
                        </div>
                    </div>
                    
                    <div class="alert alert-warning mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        提示：文件将上传至云端 OSS 存储，处理过程可能需要几秒钟。
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('index') }}" class="btn btn-light px-4">取消</a>
                        <button type="submit" class="btn btn-primary px-5">
                            <i class="bi bi-check-lg me-1"></i> 开始上传
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}