{% extends "base.html" %}

{% block title %}{{ cert.common_name }} - 证书详情{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h2 class="mb-1">证书详情: {{ cert.common_name }}</h2>
        <div class="text-muted fs-6">
            <i class="fas fa-folder-open me-1"></i>路径: {{ cert.cert_path|to_pinyin }}
        </div>
    </div>
    <div class="btn-group btn-group-sm">
        {% if cert.status == 'active' %}
            <a href="{{ url_for('revoke_certificate_view', cert_id=cert.id) }}"
               class="btn btn-warning me-1 text-nowrap"
               data-bs-toggle="tooltip"
               title="吊销此证书">
                <i class="fas fa-ban me-1"></i> 吊销证书
            </a>
        {% endif %}
        <a href="{{ url_for('renew_certificate_view', cert_id=cert.id) }}"
           class="btn btn-primary me-1 text-nowrap"
           data-bs-toggle="tooltip"
           title="续期此证书">
            <i class="fas fa-sync-alt me-1"></i> 续期
        </a>
        <a href="{{ url_for('export_certificate_view', cert_id=cert.id) }}"
           class="btn btn-success me-1 text-nowrap"
           data-bs-toggle="tooltip"
           title="导出证书文件">
            <i class="fas fa-file-export me-1"></i> 导出
        </a>
        <a href="{{ url_for('delete_certificate', cert_id=cert.id) }}"
           class="btn btn-danger text-nowrap"
           data-bs-toggle="tooltip"
           title="删除此证书(谨慎操作)">
            <i class="fas fa-trash-alt me-1"></i> 删除
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle text-primary me-2"></i> 基本信息
                </h5>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4 text-muted"><i class="fas fa-id-card me-2"></i> 通用名</dt>
                    <dd class="col-sm-8">{{ cert.common_name }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-shield-alt me-2"></i> 颁发CA</dt>
                    <dd class="col-sm-8">
                        <a href="{{ url_for('ca_detail', ca_id=ca.id) }}" class="text-decoration-none">
                            {{ ca.name }}
                        </a>
                    </dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-building me-2"></i> 组织</dt>
                    <dd class="col-sm-8">{{ cert.organization }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-users me-2"></i> 组织单位</dt>
                    <dd class="col-sm-8">{{ cert.organizational_unit or 'N/A' }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-globe me-2"></i> 国家</dt>
                    <dd class="col-sm-8">{{ cert.country }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-map-marked me-2"></i> 州/省</dt>
                    <dd class="col-sm-8">{{ cert.state or 'N/A' }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-city me-2"></i> 城市</dt>
                    <dd class="col-sm-8">{{ cert.locality or 'N/A' }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-cogs text-primary me-2"></i> 技术信息
                </h5>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4 text-muted"><i class="fas fa-key me-2"></i> 密钥长度</dt>
                    <dd class="col-sm-8">{{ cert.key_size }}位</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-calendar-check me-2"></i> 有效期</dt>
                    <dd class="col-sm-8">
                        {{ cert.days_valid }}天
                        (至 {{ cert.expires_at.strftime('%Y-%m-%d') }})
                    </dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-check-circle me-2"></i> 状态</dt>
                    <dd class="col-sm-8">
                        {% if cert.status == 'active' %}
                            <span class="badge bg-success rounded-pill">
                                <i class="fas fa-check-circle me-1"></i> 有效
                            </span>
                        {% elif cert.status == 'revoked' %}
                            <span class="badge bg-danger rounded-pill">
                                <i class="fas fa-ban me-1"></i> 已吊销
                            </span>
                        {% else %}
                            <span class="badge bg-secondary rounded-pill">
                                <i class="fas fa-clock me-1"></i> 已过期
                            </span>
                        {% endif %}
                    </dd>

                    {% if cert.status == 'revoked' %}
                    <dt class="col-sm-4 text-muted"><i class="fas fa-comment me-2"></i> 吊销原因</dt>
                    <dd class="col-sm-8">{{ cert.revocation_reason or '未指定' }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-clock me-2"></i> 吊销时间</dt>
                    <dd class="col-sm-8">{{ cert.revoked_at.strftime('%Y-%m-%d %H:%M') }}</dd>
                    {% endif %}

                    <dt class="col-sm-4 text-muted"><i class="fas fa-user me-2"></i> 创建者</dt>
                    <dd class="col-sm-8">{{ get_username(cert.created_by) }}</dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-clock me-2"></i> 创建时间</dt>
                    <dd class="col-sm-8">{{ cert.created_at.strftime('%Y-%m-%d %H:%M') }}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-list-alt text-primary me-2"></i> SAN扩展
                </h5>
            </div>
            <div class="card-body">
                {% if cert.san_dns or cert.san_ip %}
                    {% if cert.san_dns %}
                        <h6><i class="fas fa-globe me-2"></i>DNS名称:</h6>
                        <ul class="list-unstyled ms-4">
                            {% for dns in cert.san_dns.split(',') %}
                                <li><i class="fas fa-angle-right text-muted me-2"></i>{{ dns }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    {% if cert.san_ip %}
                        <h6><i class="fas fa-network-wired me-2"></i>IP地址:</h6>
                        <ul class="list-unstyled ms-4">
                            {% for ip in cert.san_ip.split(',') %}
                                <li><i class="fas fa-angle-right text-muted me-2"></i>{{ ip }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% else %}
                    <p class="text-muted mb-0"><i class="fas fa-info-circle me-2"></i>未配置SAN扩展</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-folder-open text-primary me-2"></i> 文件路径
                </h5>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4 text-muted"><i class="fas fa-certificate me-2"></i> 证书文件</dt>
                    <dd class="col-sm-8"><code>{{ cert.cert_path }}</code></dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-key me-2"></i> 私钥文件</dt>
                    <dd class="col-sm-8"><code>{{ cert.key_path }}</code></dd>

                    <dt class="col-sm-4 text-muted"><i class="fas fa-file-signature me-2"></i> CSR文件</dt>
                    <dd class="col-sm-8"><code>{{ cert.csr_path or 'N/A' }}</code></dd>
                </dl>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// 启用工具提示
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
})
</script>
{% endblock %}