{% 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-warning">
                <h5 class="mb-0 text-dark"><i class="bi bi-exclamation-triangle me-2"></i>未识别到页码</h5>
            </div>
            <div class="card-body p-4">
                <div class="row">
                    <div class="col-md-6 border-end">
                        <h6>预览扫描件</h6>
                        <div class="text-center bg-light p-2 rounded" style="height: 300px; overflow: hidden;">
                            <img src="{{ oss_url }}" class="img-fluid" style="max-height: 100%;" alt="预览">
                        </div>
                    </div>
                    <div class="col-md-6 ps-4">
                        <h6>请手动输入页码</h6>
                        <p class="text-muted small">系统未能自动从图片中解析出页码，请对照预览图手动录入。</p>
                        
                        <form action="{{ url_for('save_upload') }}" method="POST">
                            <input type="hidden" name="filename" value="{{ filename }}">
                            <input type="hidden" name="oss_url" value="{{ oss_url }}">
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">页码</label>
                                <input type="number" name="page_number" id="manualPageInput" class="form-control form-control-lg" required>
                            </div>

                            <div class="alert alert-info py-2 small">
                                <i class="bi bi-lightbulb me-1"></i> 快捷提示：
                                <button type="button" class="btn btn-link btn-sm p-0 mb-1" onclick="setPage({{ suggested_page }})">
                                    是第 <strong>{{ suggested_page }}</strong> 页吗？
                                </button>
                                <br>
                                <span class="text-muted">(根据数据库中上一页自动推算)</span>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">确认并保存</button>
                                <a href="{{ url_for('index') }}" class="btn btn-light">稍后录入</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function setPage(val) {
    document.getElementById('manualPageInput').value = val;
}
</script>
{% endblock %}