{% extends "base.html" %}
{% import "partials/nav.html" as nav %}
{% block title %}Dashboard — Quartermaster{% endblock %}
{% block nav %}{% call nav::nav("dashboard", user, csrf_token, fika_installed) %}{% endcall %}{% endblock %}
{% block content %}
<h1>Dashboard</h1>

<div class="card" style="padding: 0.75rem 1.25rem">
    <div class="flex-between">
        <span>
            <strong>SPT {{ spt_version }}</strong>
            <span class="text-muted text-sm" style="margin-left: 1rem">Tarkov {{ tarkov_version }}</span>
        </span>
        <a href="https://forge.sp-tarkov.com" class="btn btn-sm btn-outline" target="_blank" rel="noopener">SPT Forge ↗</a>
    </div>
</div>

<div class="stat-card-grid">
    <a href="/mods" class="stat-card" style="border-left-color: var(--success)">
        <div class="stat-label">Mods</div>
        <div class="stat-value">{{ mods.len() }}</div>
        <div class="stat-detail">installed</div>
    </a>
    <a href="/queue" class="stat-card" style="border-left-color: {% if pending_count > 0 %}var(--warning){% else %}var(--success){% endif %}">
        <div class="stat-label">Queue</div>
        <div class="stat-value">{{ pending_count }}</div>
        <div class="stat-detail">{% if pending_count > 0 %}pending{% else %}all clear{% endif %}</div>
    </a>
    <a href="/status" class="stat-card" style="border-left-color: var(--border)">
        <div class="stat-label">Server</div>
        <div hx-get="/api/dashboard/server-status" hx-trigger="load" hx-swap="innerHTML">
            <span class="text-muted text-sm loading-pulse">Checking...</span>
        </div>
    </a>
    {% if fika_installed %}
    <a href="/clients" class="stat-card" style="border-left-color: var(--border)">
        <div class="stat-label">Clients</div>
        <div hx-get="/api/dashboard/clients-status" hx-trigger="load, every 5s" hx-swap="innerHTML">
            <span class="text-muted text-sm loading-pulse">Checking...</span>
        </div>
    </a>
    {% endif %}
</div>

<div class="card">
    <div class="flex-between mb-1">
        <h2>Installed Mods ({{ mods.len() }})</h2>
        <span hx-get="/api/mods/check-updates" hx-trigger="load, every 60s" hx-swap="innerHTML">
            <span class="text-muted text-sm">Checking for updates...</span>
        </span>
    </div>
    {% if mods.is_empty() %}
    <div class="empty-state">
        <p>No mods installed.</p>
        {% if user.role.can_manage_mods() %}<p class="mt-1"><a href="/mods">Go to Mods</a> to install your first mod.</p>{% endif %}
    </div>
    {% else %}
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Version</th>
                <th>Installed</th>
            </tr>
        </thead>
        <tbody>
            {% for m in mods %}
            <tr>
                <td><a href="/mods/{{ m.id }}">{{ m.name }}</a></td>
                <td>{{ m.version }}</td>
                <td class="text-muted text-sm">{{ m.installed_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>

{% if pending_count > 0 %}
<div class="card">
    <h2>Pending Operations</h2>
    <p>{{ pending_count }} operation(s) queued. <a href="/queue">View queue</a></p>
</div>
{% endif %}

{% if !unmanaged_dirs.is_empty() %}
<div class="card">
    <h2>Unmanaged Mods</h2>
    <p class="text-muted text-sm mb-1">These mod directories are not tracked by Quartermaster. Use <code>quma track</code> to manage them.</p>
    <table>
        <thead><tr><th>Directory</th><th>Files</th></tr></thead>
        <tbody>
            {% for (dir, count) in &unmanaged_dirs %}
            <tr><td>{{ dir }}</td><td>{{ count }}</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}