{% extends "base.html" %}

{% block title %}Security Dashboard - VelocityCMDB{% endblock %}

{% block head_extra %}
<style>
    /* Security Dashboard Styles - Material Design 3 */
    .security-header {
        margin-bottom: 32px;
    }

    /* Summary Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .stat-card {
        text-align: center;
        padding: 24px;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--md-shape-corner-medium);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px auto;
    }

    .stat-icon.total { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
    .stat-icon.critical { background: var(--md-error-container); color: var(--md-on-error-container); }
    .stat-icon.high { background: var(--md-warning-container); color: var(--md-on-warning-container); }
    .stat-icon.versions { background: var(--md-primary-container); color: var(--md-on-primary-container); }

    .stat-number {
        font: var(--md-typescale-display-small);
        color: var(--md-primary);
        margin: 0 0 8px 0;
        font-weight: 500;
    }

    .stat-number.critical-text { color: var(--md-error); }
    .stat-number.high-text { color: var(--md-warning, #fd7e14); }

    .stat-label {
        font: var(--md-typescale-body-medium);
        color: var(--md-on-surface-variant);
        margin: 0;
    }

    /* Severity Distribution Chart */
    .chart-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 16px;
    }

    .pie-chart {
        width: 100px;
        height: 100px;
    }

    .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font: var(--md-typescale-body-small);
    }

    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: var(--md-shape-corner-extra-small);
    }

    /* Version Table */
    .version-table {
        width: 100%;
        border-collapse: collapse;
    }

    .version-table th,
    .version-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--md-outline-variant);
        font: var(--md-typescale-body-small);
    }

    .version-table th {
        background: var(--md-surface-container-high);
        font-weight: 500;
        color: var(--md-on-surface);
    }

    .version-table tbody tr:hover {
        background: var(--md-surface-container);
    }

    /* Severity indicator dots */
    .severity-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }

    .severity-dot.critical { background: #dc3545; }
    .severity-dot.high { background: #fd7e14; }
    .severity-dot.medium { background: #ffc107; }
    .severity-dot.low { background: #28a745; }

    /* Severity badges */
    .severity-badge {
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
        min-width: 50px;
        display: inline-block;
        text-align: center;
    }

    .severity-badge.critical { background: #dc3545; color: white; }
    .severity-badge.high { background: #fd7e14; color: white; }
    .severity-badge.medium { background: #ffc107; color: #333; }
    .severity-badge.low { background: #28a745; color: white; }

    /* Count badges */
    .count-badge {
        padding: 2px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
        min-width: 30px;
        display: inline-block;
        text-align: center;
    }

    .count-badge.critical { background: var(--md-error-container); color: var(--md-on-error-container); }
    .count-badge.high { background: var(--md-warning-container); color: var(--md-on-warning-container); }
    .count-badge.medium { background: #fff3cd; color: #856404; }
    .count-badge.neutral { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }

    /* CVE List */
    .cve-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .cve-item {
        padding: 12px 16px;
        border-bottom: 1px solid var(--md-outline-variant);
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .cve-item:last-child {
        border-bottom: none;
    }

    .cve-id {
        font: var(--md-typescale-label-medium);
        font-weight: 500;
        color: var(--md-primary);
        min-width: 140px;
    }

    .cve-id a {
        color: inherit;
        text-decoration: none;
    }

    .cve-id a:hover {
        text-decoration: underline;
    }

    .cve-desc {
        font: var(--md-typescale-body-small);
        color: var(--md-on-surface-variant);
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cve-score {
        font: var(--md-typescale-label-medium);
        font-weight: 500;
        min-width: 40px;
        text-align: right;
    }

    .cve-date {
        font: var(--md-typescale-body-small);
        color: var(--md-on-surface-variant);
        min-width: 100px;
        text-align: right;
    }

    /* Action buttons */
    .action-link {
        color: var(--md-primary);
        text-decoration: none;
        font: var(--md-typescale-label-medium);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .action-link:hover {
        text-decoration: underline;
    }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: 48px 24px;
        color: var(--md-on-surface-variant);
    }

    .empty-state i {
        margin-bottom: 16px;
        opacity: 0.5;
    }

    /* Error state */
    .error-state {
        text-align: center;
        padding: 48px 24px;
        color: var(--md-error);
        background: var(--md-error-container);
        border-radius: var(--md-shape-corner-medium);
        margin: 20px 0;
    }

    /* Sync button */
    .sync-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--md-primary);
        color: var(--md-on-primary);
        border: none;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-large);
        cursor: pointer;
        text-decoration: none;
    }

    .sync-button:hover {
        opacity: 0.9;
    }

    /* Grid layout for dashboard sections */
    .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }

    @media (max-width: 1200px) {
        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Table wrapper for overflow */
    .table-wrapper {
        overflow-x: auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="security-header">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px;">
        <div>
            <h1 class="md-headline-large md-primary md-flex md-align-center" style="gap: 16px; margin: 0 0 8px 0;">
                <i data-lucide="shield-alert"></i>
                Security Dashboard
            </h1>
            <p class="md-body-large" style="color: var(--md-on-surface-variant); margin: 0;">
                CVE vulnerability tracking across network infrastructure
            </p>
        </div>
        <a href="{{ url_for('security.sync_versions') }}" class="sync-button">
            <i data-lucide="refresh-cw" size="18"></i>
            Sync CVE Data
        </a>
    </div>
</div>

{% if error %}
    <div class="error-state">
        <i data-lucide="alert-circle" size="48"></i>
        <h3 class="md-title-large" style="margin: 16px 0 8px 0;">Error</h3>
        <p class="md-body-medium">{{ error }}</p>
    </div>
{% else %}
    <!-- Summary Statistics -->
    <div class="stats-grid">
        <div class="md-card outlined stat-card">
            <div class="stat-icon total">
                <i data-lucide="bug" size="24"></i>
            </div>
            <div class="stat-number">{{ summary.total or 0 }}</div>
            <div class="stat-label">Total CVEs</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-icon critical">
                <i data-lucide="alert-octagon" size="24"></i>
            </div>
            <div class="stat-number critical-text">{{ summary.critical or 0 }}</div>
            <div class="stat-label">Critical</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-icon high">
                <i data-lucide="alert-triangle" size="24"></i>
            </div>
            <div class="stat-number high-text">{{ summary.high or 0 }}</div>
            <div class="stat-label">High</div>
        </div>
        <div class="md-card outlined stat-card">
            <div class="stat-icon versions">
                <i data-lucide="layers" size="24"></i>
            </div>
            <div class="stat-number">{{ summary.versions_tracked or 0 }}</div>
            <div class="stat-label">Versions Tracked</div>
        </div>
    </div>

    <div class="dashboard-grid">
        <!-- Severity Distribution -->
        <div class="md-card outlined">
            <div class="md-card-header">
                <h2 class="md-card-title md-flex md-align-center" style="gap: 12px;">
                    <i data-lucide="pie-chart"></i>
                    Severity Distribution
                </h2>
            </div>
            <div class="md-card-content">
                {% if severity_dist.labels %}
                <div class="chart-container">
    <div style="width: 400; height: 400;">
        <canvas id="severityChart"></canvas>
    </div>
    <div class="chart-legend">
                        {% for label in severity_dist.labels %}
                        <div class="legend-item">
                            <div class="legend-color" style="background: {{ severity_dist.colors.get(label, '#6c757d') }};"></div>
                            <span>{{ label }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% else %}
                <div class="empty-state">
                    <i data-lucide="pie-chart" size="48"></i>
                    <p>No CVE data available</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Vulnerability by Version -->
        <div class="md-card outlined">
            <div class="md-card-header" style="display: flex; justify-content: space-between; align-items: center;">
                <h2 class="md-card-title md-flex md-align-center" style="gap: 12px;">
                    <i data-lucide="list"></i>
                    Vulnerability by Version
                </h2>
                <a href="{{ url_for('security.versions') }}" class="action-link">
                    View All <i data-lucide="arrow-right" size="16"></i>
                </a>
            </div>
            <div class="md-card-content" style="padding: 0;">
                {% if version_report %}
                <div class="table-wrapper">
                    <table class="version-table">
                        <thead>
                            <tr>
                                <th>VERSION</th>
                                <th style="text-align: center;">TOTAL</th>
                                <th style="text-align: center;">CRITICAL</th>
                                <th style="text-align: center;">HIGH</th>
                                <th style="text-align: center;">MEDIUM</th>
                                <th>ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for v in version_report[:8] %}
                            <tr>
                                <td>
                                    <span class="severity-dot {% if v.critical %}critical{% elif v.high %}high{% elif v.cve_count > 0 %}medium{% else %}low{% endif %}"></span>
                                    {{ v.vendor|title }} {{ v.product|upper }} {{ v.version }}
                                    {% if v.device_count %}
                                    <span class="count-badge neutral" title="Devices running this version">{{ v.device_count }}</span>
                                    {% endif %}
                                </td>
                                <td style="text-align: center;">
                                    <strong>{{ v.cve_count or 0 }}</strong>
                                </td>
                                <td style="text-align: center;">
                                    {% if v.critical %}
                                    <span class="count-badge critical">{{ v.critical }}</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td style="text-align: center;">
                                    {% if v.high %}
                                    <span class="count-badge high">{{ v.high }}</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td style="text-align: center;">
                                    {% if v.medium %}
                                    <span class="count-badge medium">{{ v.medium }}</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td>
                                    <a href="{{ url_for('security.version_detail', vendor=v.vendor, product=v.product, version=v.version) }}" class="action-link">
                                        <i data-lucide="eye" size="14"></i> View
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="empty-state">
                    <i data-lucide="database" size="48"></i>
                    <p>No versions synced yet</p>
                    <a href="{{ url_for('security.sync_versions') }}" class="action-link" style="margin-top: 12px;">
                        Sync CMDB Versions
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent CVEs -->
    <div class="md-card outlined">
        <div class="md-card-header">
            <h2 class="md-card-title md-flex md-align-center" style="gap: 12px;">
                <i data-lucide="clock"></i>
                Recent CVEs in Cache
            </h2>
        </div>
        <div class="md-card-content" style="padding: 0;">
            {% if recent_cves %}
            <ul class="cve-list">
                {% for cve in recent_cves %}
                <li class="cve-item">
                    <span class="cve-id">
                        <a href="{{ url_for('security.cve_detail', cve_id=cve.cve_id) }}">{{ cve.cve_id }}</a>
                    </span>
                    <span class="severity-badge {{ (cve.severity or 'unknown')|lower }}">
                        {{ cve.severity or 'N/A' }}
                    </span>
                    <span class="cve-score">{{ cve.cvss_v3_score or '-' }}</span>
                    <span class="cve-desc">{{ cve.description[:100] }}{% if cve.description|length > 100 %}...{% endif %}</span>
                    <span class="cve-date">{{ cve.published_date[:10] if cve.published_date else '-' }}</span>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <div class="empty-state">
                <i data-lucide="shield-check" size="48"></i>
                <p>No CVEs in cache</p>
            </div>
            {% endif %}
        </div>
    </div>
{% endif %}

<!-- Chart.js for pie chart -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    // Initialize Lucide icons
    lucide.createIcons();

    // Severity pie chart
    {% if severity_dist.labels %}
    const ctx = document.getElementById('severityChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: {{ severity_dist["labels"] | tojson }},
                datasets: [{
            data: {{ severity_dist["values"] | tojson }},
                    backgroundColor: [
                        {% for label in severity_dist["labels"] %}
'{{ severity_dist["colors"].get(label, "#6c757d") }}',
                        {% endfor %}
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                cutout: '60%'
            }
        });
    }
    {% endif %}
</script>
{% endblock %}