{% extends "base.html" %}
{% block title %}Dashboard - garuda-pilot{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Dashboard</h1>
    <p class="subtitle">System upgrade overview</p>
</div>

<div class="cards">
    <a href="/history" class="card" style="text-decoration: none; color: inherit;">
        <h3>Upgrade History</h3>
        <div class="value">{{ transaction_count }}</div>
        <div class="detail">
            {% if last_transaction %}
                Last upgrade: {{ last_transaction.started_at[:16] | replace("T", " ") }}
            {% else %}
                No transactions recorded
            {% endif %}
        </div>
    </a>

    <a href="/preview" class="card" style="text-decoration: none; color: inherit;">
        <h3>Pending Updates</h3>
        <div class="value">{{ pending_count }}</div>
        <div class="detail">
            {% if pending_count %}
                {{ pending_count }} package{{ "s" if pending_count != 1 else "" }} available to upgrade
            {% else %}
                System is up to date
            {% endif %}
        </div>
    </a>

    <a href="/news" class="card" style="text-decoration: none; color: inherit;">
        <h3>News</h3>
        <div class="value">{{ news_count }}</div>
        <div class="detail">
            {% if news_count %}
                {{ news_count }} recent item{{ "s" if news_count != 1 else "" }} (last 6 months)
            {% else %}
                No news fetched yet
            {% endif %}
        </div>
    </a>

    <a href="/security" class="card" style="text-decoration: none; color: inherit;">
        <h3>Security</h3>
        {% if total_sec_count %}
            {% if vuln_count %}
                <div class="value" style="color: var(--red);">{{ vuln_count }}</div>
                <div class="detail">{{ vuln_count }} vulnerable of {{ total_sec_count }} advisories</div>
            {% else %}
                <div class="value" style="color: var(--green);">0</div>
                <div class="detail">{{ total_sec_count }} advisories — none vulnerable</div>
            {% endif %}
        {% else %}
            <div class="value">—</div>
            <div class="detail">Not checked yet</div>
        {% endif %}
    </a>

    <a href="/health" class="card" style="text-decoration: none; color: inherit;">
        <h3>System Health</h3>
        {% if health_result %}
            {% if health_result.all_clear %}
                <div class="value" style="color: var(--green);">OK</div>
                <div class="detail">All checks passed</div>
            {% else %}
                <div class="value" style="color: var(--warning);">{{ health_result.issue_count }}</div>
                <div class="detail">{{ health_result.issue_count }} issue{{ "s" if health_result.issue_count != 1 else "" }} ({{ health_result.worst_severity }})</div>
            {% endif %}
        {% else %}
            <div class="value">—</div>
            <div class="detail">Not checked yet</div>
        {% endif %}
    </a>

    <div class="card">
        <h3>Database Backup</h3>
        {% if last_backup %}
            <div class="value" style="color: var(--green); font-size: 1.2em;">{{ last_backup.timestamp }}</div>
            <div class="detail">{{ last_backup.size_mb }} MB{% if last_backup.version %} · {{ last_backup.version }}{% endif %}</div>
        {% else %}
            <div class="value">—</div>
            <div class="detail">No backups yet</div>
        {% endif %}
        <div id="dashboard-backup-status" style="margin-top: 8px;">
            <button class="btn btn-sm btn-secondary"
                    hx-post="/htmx/backup-create?brief=1"
                    hx-target="#dashboard-backup-status"
                    hx-swap="innerHTML"
                    hx-indicator="#dashboard-backup-spinner">
                Create Backup
                <span id="dashboard-backup-spinner" class="htmx-indicator"><span class="spinner"></span></span>
            </button>
        </div>
        <div class="detail" style="margin-top: 4px;">
            <a href="/about" style="font-size: 0.85em;">Manage backups →</a>
        </div>
    </div>
</div>

{% if pending_count %}
<div style="margin-top: 20px;">
    <button class="btn btn-upgrade" onclick="openUpgradePanel()">
        Upgrade System
    </button>
    <span style="color: var(--text-muted); font-size: 0.9em; margin-left: 12px;">
        {{ pending_count }} update{{ "s" if pending_count != 1 else "" }} available
    </span>
</div>
{% endif %}

{% include "upgrade_panel.html" %}
{% endblock %}