{% extends "base.html" %}

{% block title %}Dashboard - certmesh{% endblock %}

{% block content %}
<!-- Hidden CSRF token for JS -->
<meta name="csrf-token" content="{{ csrf_token }}">

<!-- Summary Cards -->
<div class="row g-3 mb-4" id="summaryCards">
    <div class="col-6 col-md-3">
        <div class="card cm-summary-card cm-card-total h-100">
            <div class="card-body">
                <div>
                    <h6 class="card-subtitle mb-1 text-body-secondary">Total Certificates</h6>
                    <h2 class="card-title mb-0 cm-count" id="totalCount">--</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card cm-summary-card cm-card-expiring h-100">
            <div class="card-body">
                <div>
                    <h6 class="card-subtitle mb-1 text-body-secondary">Expiring Soon</h6>
                    <h2 class="card-title mb-0 cm-count" id="expiringCount">--</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card cm-summary-card cm-card-expired h-100">
            <div class="card-body">
                <div>
                    <h6 class="card-subtitle mb-1 text-body-secondary">Expired</h6>
                    <h2 class="card-title mb-0 cm-count" id="expiredCount">--</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card cm-summary-card cm-card-errors h-100">
            <div class="card-body">
                <div>
                    <h6 class="card-subtitle mb-1 text-body-secondary">Errors</h6>
                    <h2 class="card-title mb-0 cm-count" id="errorCount">--</h2>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Expiry Timeline -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Expiry Timeline</h5>
        <button class="btn btn-sm btn-outline-primary" id="refreshBtn"
                hx-get="/dashboard/api/timeline" hx-trigger="click"
                hx-target="#timelineContent" hx-swap="innerHTML">
            <i class="bi bi-arrow-clockwise me-1"></i>Refresh
        </button>
    </div>
    <div class="card-body" id="timelineContent">
        <div class="cm-timeline-bars">
            <div class="cm-timeline-row">
                <span class="cm-timeline-label">Expired</span>
                <div class="progress flex-grow-1" role="progressbar">
                    <div class="progress-bar cm-bar-expired cm-timeline-bar" id="barExpired" style="width: 0%">0</div>
                </div>
            </div>
            <div class="cm-timeline-row">
                <span class="cm-timeline-label">Critical (&lt;7d)</span>
                <div class="progress flex-grow-1" role="progressbar">
                    <div class="progress-bar cm-bar-critical cm-timeline-bar" id="barCritical" style="width: 0%">0</div>
                </div>
            </div>
            <div class="cm-timeline-row">
                <span class="cm-timeline-label">Warning (7-30d)</span>
                <div class="progress flex-grow-1" role="progressbar">
                    <div class="progress-bar cm-bar-warning cm-timeline-bar" id="barWarning" style="width: 0%">0</div>
                </div>
            </div>
            <div class="cm-timeline-row">
                <span class="cm-timeline-label">Attention (30-60d)</span>
                <div class="progress flex-grow-1" role="progressbar">
                    <div class="progress-bar cm-bar-attention cm-timeline-bar" id="barAttention" style="width: 0%">0</div>
                </div>
            </div>
            <div class="cm-timeline-row">
                <span class="cm-timeline-label">Healthy (&gt;60d)</span>
                <div class="progress flex-grow-1" role="progressbar">
                    <div class="progress-bar cm-bar-healthy cm-timeline-bar" id="barHealthy" style="width: 0%">0</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Provider Tabs + Certificate Table -->
<div class="card">
    <div class="card-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <ul class="nav nav-tabs card-header-tabs" role="tablist" id="providerTabs">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-bs-toggle="tab" data-provider="all"
                            type="button" role="tab">All Providers</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-provider="digicert"
                            type="button" role="tab">
                        <i class="bi bi-patch-check me-1"></i>DigiCert
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-provider="venafi"
                            type="button" role="tab">
                        <i class="bi bi-key me-1"></i>Venafi
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-provider="vault_pki"
                            type="button" role="tab">
                        <i class="bi bi-safe me-1"></i>Vault PKI
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-provider="acm"
                            type="button" role="tab">
                        <i class="bi bi-cloud me-1"></i>ACM
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-provider="letsencrypt"
                            type="button" role="tab">
                        <i class="bi bi-lock me-1"></i>Let's Encrypt
                    </button>
                </li>
            </ul>
            <!-- Search -->
            <div class="input-group" style="max-width: 300px;">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control" id="certSearch"
                       placeholder="Search certificates..." aria-label="Search certificates">
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 cm-cert-table">
                <caption>Certificate Inventory</caption>
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>Common Name</th>
                        <th>Provider</th>
                        <th>Serial / ID</th>
                        <th>Expires</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="certTableBody">
                    <tr>
                        <td colspan="6" class="text-center py-5 text-body-secondary">
                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                            Loading certificates...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Live Logs Panel -->
<div class="card mb-4" id="logPanel">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <button class="btn btn-link text-decoration-none p-0" type="button"
                    data-bs-toggle="collapse" data-bs-target="#logPanelBody"
                    aria-expanded="false" aria-controls="logPanelBody">
                <i class="bi bi-terminal me-2"></i>Live Logs
                <i class="bi bi-chevron-down ms-1 cm-collapse-icon"></i>
            </button>
        </h5>
        <div class="d-flex align-items-center gap-2" id="logControls">
            <span class="cm-log-status" id="logStatus" title="Disconnected">
                <span class="cm-status-dot cm-dot-disconnected"></span>
                <small class="text-body-secondary">Disconnected</small>
            </span>
            <select class="form-select form-select-sm" id="logLevelFilter" style="width: auto;">
                <option value="ALL">All Levels</option>
                <option value="ERROR">Error</option>
                <option value="WARNING">Warning</option>
                <option value="INFO">Info</option>
                <option value="DEBUG">Debug</option>
            </select>
            <select class="form-select form-select-sm" id="logProviderFilter" style="width: auto;">
                <option value="ALL">All Providers</option>
            </select>
            <button class="btn btn-sm btn-outline-secondary" id="logPauseBtn" title="Pause/Resume">
                <i class="bi bi-pause-fill"></i>
            </button>
            <button class="btn btn-sm btn-outline-secondary" id="logExportBtn" title="Download logs">
                <i class="bi bi-download"></i>
            </button>
            <button class="btn btn-sm btn-outline-secondary" id="logClearBtn" title="Clear">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    </div>
    <div class="collapse" id="logPanelBody">
        <div class="card-body p-0">
            <div id="logTerminal" class="cm-log-terminal"></div>
        </div>
    </div>
</div>

<!-- Revoke Confirmation Modal -->
<div class="modal fade" id="revokeModal" tabindex="-1" aria-labelledby="revokeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="revokeModalLabel">
                    <i class="bi bi-exclamation-octagon me-2"></i>Confirm Revocation
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>You are about to <strong>permanently revoke</strong> this certificate:</p>
                <dl class="row mb-0">
                    <dt class="col-4">Common Name</dt>
                    <dd class="col-8" id="revokeCommonName">--</dd>
                    <dt class="col-4">Provider</dt>
                    <dd class="col-8" id="revokeProvider">--</dd>
                    <dt class="col-4">ID</dt>
                    <dd class="col-8" id="revokeCertId">--</dd>
                </dl>
                <div class="alert alert-warning mt-3 mb-0">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    This action cannot be undone. Services using this certificate will stop working.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmRevokeBtn">
                    <i class="bi bi-x-circle me-1"></i>Revoke Certificate
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Toast container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer"></div>
{% endblock %}

{% block scripts_extra %}
<script>
    // Initialize dashboard on page load
    document.addEventListener('DOMContentLoaded', function() {
        CertMeshDashboard.init();
    });
</script>
{% endblock %}