{% extends "base.html" %}

{% block title %}导出证书 - {{ cert.common_name }}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h4 class="card-title">导出证书: {{ cert.common_name }}</h4>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('export_certificate_view', cert_id=cert.id) }}">
            <div class="mb-3">
                <label class="form-label">导出格式</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="format" id="formatPkcs12" value="pkcs12" checked>
                    <label class="form-check-label" for="formatPkcs12">
                        PKCS#12 (.p12/.pfx)
                    </label>
                    <div class="form-text">包含证书和私钥的加密存档，适用于大多数应用</div>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="format" id="formatPem" value="pem">
                    <label class="form-check-label" for="formatPem">
                        PEM (.pem) - 合并文件
                    </label>
                    <div class="form-text">Base64编码的证书和私钥合并为一个文件</div>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="format" id="formatPemSeparate" value="pem_separate">
                    <label class="form-check-label" for="formatPemSeparate">
                        PEM (.pem) - 分开文件
                    </label>
                    <div class="form-text">Base64编码的证书(.pem)和私钥(.key)作为两个单独文件</div>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="format" id="formatCrtSeparate" value="crt_separate">
                    <label class="form-check-label" for="formatCrtSeparate">
                        CRT (.crt) - 分开文件
                    </label>
                    <div class="form-text">Base64编码的证书(.crt)和私钥(.key)作为两个单独文件</div>
                </div>
            </div>

            <div class="mb-3" id="passwordField">
                <label for="password" class="form-label">PKCS#12密码</label>
                <input type="password" class="form-control" id="password" name="password">
                <div class="form-text">用于保护PKCS#12文件的密码</div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ url_for('certificate_detail', cert_id=cert.id) }}" class="btn btn-secondary me-md-2">取消</a>
                <button type="submit" class="btn btn-primary">导出证书</button>
            </div>
        </form>
    </div>
</div>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const formatRadios = document.querySelectorAll('input[name="format"]');
    const passwordField = document.getElementById('passwordField');

    function togglePasswordField() {
        const selectedFormat = document.querySelector('input[name="format"]:checked').value;
        passwordField.style.display = selectedFormat === 'pkcs12' ? 'block' : 'none';
    }

    formatRadios.forEach(radio => {
        radio.addEventListener('change', togglePasswordField);
    });

    // 初始化状态
    togglePasswordField();
});
</script>
{% endblock %}
{% endblock %}