{% extends "base.html" %}
{% import "partials/nav.html" as nav %}
{% import "partials/icons.html" as icons %}
{% block title %}Mods — Quartermaster{% endblock %}
{% block nav %}{% call nav::nav("mods", user, csrf_token, fika_installed) %}{% endcall %}{% endblock %}
{% block content %}
<div hx-get="/api/tasks/status" hx-trigger="load" hx-swap="outerHTML" id="task-status"></div>

{% if let Some(flash) = flash %}
<div class="alert alert-{{ flash.flash_type }}">{{ flash.message }}</div>
{% endif %}

<div class="tab-bar">
    <button class="tab active" id="tab-installed"
            onclick="window.location.href='/mods'; return false;">Installed</button>
    <button class="tab" id="tab-requests"
            hx-get="/api/mods/requests"
            hx-target="#mods-tab-content"
            hx-swap="innerHTML"
            onclick="setModTab(this, 'requests')">Requests</button>
</div>

<div id="mods-tab-content">
    <div class="flex-between">
        <h2>Installed Mods</h2>
        {% if user.role.can_manage_mods() %}
        <div class="flex gap-1">
            <form method="post" action="/mods/update-all" style="display:inline"
                  onsubmit="return confirm('Update all mods?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="btn btn-sm btn-outline">{% call icons::refresh() %}{% endcall %} Update All</button>
            </form>
        </div>
        {% endif %}
    </div>

<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>

{% if mods.is_empty() %}
<div class="card">
    <div class="empty-state">
        <p>No mods installed.</p>
        {% if user.role.can_manage_mods() %}<p class="mt-1">Use the form below to install your first mod.</p>{% endif %}
    </div>
</div>
{% else %}
<div class="card">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Version</th>
                <th>Files</th>
                <th>Size</th>
                <th>Installed</th>
                {% if user.role.can_manage_mods() %}<th>Actions</th>{% endif %}
            </tr>
        </thead>
        <tbody id="mod-list-body"
               hx-get="/api/mods/list"
               hx-trigger="sse:modsChanged"
               hx-swap="innerHTML">
            {% for m in &mods %}
            <tr>
                <td><a href="/mods/{{ m.mod_info.id }}">{{ m.mod_info.name }}</a></td>
                <td><span id="mod-version-{{ m.mod_info.id }}">{{ m.mod_info.version }}</span></td>
                <td class="text-muted">{{ m.file_count }}</td>
                <td class="text-muted">{{ m.total_size|format_size_i64 }}</td>
                <td class="text-muted text-sm">{{ m.mod_info.installed_at }}</td>
                {% if user.role.can_manage_mods() %}
                <td>
                    <span id="mod-update-{{ m.mod_info.id }}">
                        <form method="post" action="/mods/{{ m.mod_info.id }}/update" style="display:inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <button type="submit" class="btn btn-sm btn-outline">{% call icons::refresh() %}{% endcall %} Update</button>
                        </form>
                    </span>
                    <form method="post" action="/mods/{{ m.mod_info.id }}/remove" style="display:inline"
                          data-name="{{ m.mod_info.name }}"
                          onsubmit="return confirm('Remove ' + this.dataset.name + '?')">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <button type="submit" class="btn btn-sm btn-danger">{% call icons::trash() %}{% endcall %} Remove</button>
                    </form>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
            <tr class="tfoot-row">
                <td colspan="{% if user.role.can_manage_mods() %}6{% else %}5{% endif %}" class="text-muted text-sm">
                    Total: {{ mods.len() }} mods — {{ grand_total_size|format_size_i64 }}
                </td>
            </tr>
        </tbody>
    </table>
    <span hx-get="/api/mods/update-status" hx-trigger="load, sse:modsChanged" hx-swap="none"></span>
</div>
{% endif %}

{% if user.role.can_manage_mods() %}
<div class="card">
    <h2>Install Mod</h2>
    <form method="post" action="/mods/install">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <label for="mod_ref">Forge Mod ID or Name</label>
        <input type="text" id="mod_ref" name="mod_ref" placeholder="e.g. 2326 or SAIN" required>
        <button type="submit" class="btn">{% call icons::download() %}{% endcall %} Install</button>
    </form>
</div>
{% endif %}
</div>

<script>
function setModTab(el, tab) {
    document.querySelectorAll('.tab-bar .tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    location.hash = tab;
}
document.addEventListener('DOMContentLoaded', function() {
    if (location.hash === '#requests') {
        var btn = document.getElementById('tab-requests');
        if (btn) { btn.click(); }
    }
});
</script>
{% endblock %}