{% extends "base.html" %}

{% block title %}证书管理系统 - 首页{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <!-- CA机构统计卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                CA机构数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ ca_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shield-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ url_for('ca_list') }}" class="small text-primary stretched-link">
                        查看所有CA机构 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 证书统计卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                证书总数</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ cert_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-certificate fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ url_for('certificate_list') }}" class="small text-success stretched-link">
                        查看所有证书 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 活跃证书卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                活跃证书</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ active_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ url_for('certificate_list') }}?status=active" class="small text-info stretched-link">
                        查看活跃证书 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 即将过期证书卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                即将过期证书 (30天内)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ expiring_soon_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ url_for('certificate_list') }}?expiring=30" class="small text-warning stretched-link">
                        查看即将过期证书 <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 最近CA机构 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-shield-alt me-2"></i> 最近创建的CA机构
                    </h6>
                    <a href="{{ url_for('create_ca_view') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i> 新建CA
                    </a>
                </div>
                <div class="card-body">
                    {% if recent_cas %}
                    <div class="list-group">
                        {% for ca in recent_cas %}
                        <a href="{{ url_for('ca_detail', ca_id=ca.id) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ ca.name }}</h6>
                                <small class="text-muted">{{ ca.common_name }}</small>
                            </div>
                            <span class="badge bg-primary rounded-pill">
                                {{ ca.created_at.strftime('%Y-%m-%d') }}
                            </span>
                        </a>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-shield-alt fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无CA机构记录</p>
                        <a href="{{ url_for('create_ca_view') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i> 创建第一个CA机构
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 最近证书 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-certificate me-2"></i> 最近创建的证书
                    </h6>
                    <a href="{{ url_for('create_certificate_view') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i> 新建证书
                    </a>
                </div>
                <div class="card-body">
                    {% if recent_certs %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>通用名</th>
                                    <th>状态</th>
                                    <th>有效期</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for cert in recent_certs %}
                                <tr>
                                    <td>
                                        <a href="{{ url_for('certificate_detail', cert_id=cert.id) }}"
                                           class="text-decoration-none">
                                            {{ cert.common_name }}
                                        </a>
                                    </td>
                                    <td>
                                        {% if cert.status == 'active' %}
                                            <span class="badge bg-success rounded-pill">有效</span>
                                        {% elif cert.status == 'revoked' %}
                                            <span class="badge bg-danger rounded-pill">已吊销</span>
                                        {% else %}
                                            <span class="badge bg-secondary rounded-pill">已过期</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ cert.expires_at.strftime('%Y-%m-%d') }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-certificate fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无证书记录</p>
                        <a href="{{ url_for('create_certificate_view') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i> 创建第一个证书
                        </a>
                    </div>
                    {% endif %}
                </div>
            </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 %}