{% extends 'inventory/base.html' %}

{% block title %}创建备份 - {{ block.super }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="card-title mb-0">创建系统备份</h2>
                        <p class="text-muted">备份系统数据和配置</p>
                    </div>
                    <a href="{% url 'backup_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> 返回备份列表
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <form method="post" action="{% url 'create_backup' %}" id="backupForm">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label for="backup_name" class="form-label">备份名称</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-tag"></i></span>
                            <input type="text" class="form-control" id="backup_name" name="backup_name" 
                                   value="{{ suggested_name }}" required
                                   placeholder="输入备份名称，例如：手动备份-20230101">
                        </div>
                        <div class="form-text">
                            名称仅可包含字母、数字、连字符和下划线
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label d-block">备份内容</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="backup_db" name="backup_db" checked disabled>
                            <label class="form-check-label" for="backup_db">
                                数据库 <span class="badge bg-success">必选</span>
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="backup_media" name="backup_media" checked>
                            <label class="form-check-label" for="backup_media">
                                媒体文件
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">备份描述</label>
                        <textarea class="form-control" id="backup_description" name="backup_description" 
                                  rows="3" placeholder="添加此次备份的描述信息（可选）"></textarea>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'backup_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle me-1"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBackup">
                            <i class="bi bi-hdd me-1"></i> 开始备份
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">备份说明</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <div class="d-flex">
                        <div class="flex-shrink-0 me-2">
                            <i class="bi bi-info-circle-fill"></i>
                        </div>
                        <div>
                            <h6 class="alert-heading">备份内容</h6>
                            <ul class="ps-3 mb-0">
                                <li>系统全部数据库数据</li>
                                <li>用户上传的媒体文件</li>
                                <li>系统配置信息</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <h6 class="mb-2">备份过程</h6>
                <ol class="text-muted ps-3 mb-4">
                    <li>系统将创建完整数据库副本</li>
                    <li>打包媒体文件（如选择）</li>
                    <li>记录备份元数据</li>
                    <li>完成后可在备份列表下载或恢复</li>
                </ol>
                
                <h6 class="mb-2">备份建议</h6>
                <ul class="text-muted ps-3 mb-0">
                    <li>定期创建备份，防止数据丢失</li>
                    <li>在系统变更前创建备份</li>
                    <li>重要数据修改后及时备份</li>
                    <li>建议保留多个时间点的备份</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 备份进度模态框 -->
<div class="modal fade" id="backupProgressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="backupProgressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="backupProgressModalLabel">备份进行中</h5>
            </div>
            <div class="modal-body text-center py-4">
                <div class="mb-3">
                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <h5 class="mb-3">正在创建系统备份</h5>
                <p class="text-muted mb-0">请耐心等待，备份过程可能需要几分钟时间...</p>
                <div class="progress mt-4">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const backupForm = document.getElementById('backupForm');
        const backupProgressModal = new bootstrap.Modal(document.getElementById('backupProgressModal'));
        
        if (backupForm) {
            backupForm.addEventListener('submit', function() {
                // 显示进度模态框
                backupProgressModal.show();
            });
        }
        
        // 备份名称验证
        const backupNameInput = document.getElementById('backup_name');
        if (backupNameInput) {
            backupNameInput.addEventListener('input', function() {
                this.value = this.value.replace(/[^a-zA-Z0-9_\-]/g, '');
            });
        }
    });
</script>
{% endblock %}