{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1>Mods: {{ instance_name }}</h1>
    <a href="/instances/{{ instance_id }}/edit" class="btn">&larr; Back to Instance</a>
</div>

{% if let Some(msg) = flash %}
<div class="flash flash-{{ msg.kind }}">{{ msg.text }}</div>
{% endif %}

<div class="card" style="margin-bottom:1rem">
    <form action="/instances/{{ instance_id }}/mods" method="post" enctype="multipart/form-data" class="form-row">
        <input type="file" name="mod_files" accept=".jar,.zip" multiple required style="font-size:0.85rem">
        <button type="submit" class="btn-ok">Upload & Validate</button>
    </form>
    <p style="margin-top:0.5rem;font-size:0.8rem;color:var(--fg-muted)">
        Select one or more <code>.jar</code> files, or a <code>.zip</code> containing multiple <code>.jar</code>s.
        Disabled mods are renamed to <code>.jar.disabled</code> so the server skips them.
    </p>
</div>

{% if mods.is_empty() %}
<div class="card card-muted">
    <p>No mods installed. Upload a mod to get started.</p>
</div>
{% else %}
<div class="batch-bar" style="margin-bottom:0.75rem;display:flex;gap:0.5rem;align-items:center">
    <span style="font-size:0.85rem;color:var(--fg-muted)">With selected:</span>
    <button type="button" class="btn" id="batch-toggle-btn" onclick="batchSubmit('toggle')">Toggle</button>
    <button type="button" class="btn-danger"
            onclick="if(confirm('Permanently delete selected mods?')) batchSubmit('delete')">Delete</button>
</div>
<table class="table" id="mods-table">
    <thead>
        <tr>
            <th><input type="checkbox" id="select-all" onclick="toggleAll(this)"></th>
            <th>Name</th>
            <th>Filename</th>
            <th>Side</th>
            <th>Status</th>
            <th>Added</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    {% for m in mods %}
        <tr class="{% if !m.enabled %}row-dim{% endif %}">
            <td><input type="checkbox" name="mod_id" value="{{ m.id }}" data-enabled="{{ m.enabled }}"></td>
            <td>
                {% if let Some(name) = m.display_name %}
                    {{ name }}
                {% else %}
                    <em>{{ m.filename }}</em>
                {% endif %}
            </td>
            <td><code>{{ m.filename }}</code></td>
            <td>
                <span class="tag
                    {% if m.side == "BOTH" %}tag-ok{% endif %}
                    {% if m.side == "SERVER" %}tag-ok{% endif %}
                    {% if m.side == "CLIENT" %}tag-err{% endif %}
                    {% if m.side == "UNKNOWN" %}tag{% endif %}
                ">{{ m.side }}</span>
            </td>
            <td>
                {% if !m.accepted %}
                    <span class="status-badge status-error">Rejected</span>
                {% else if !m.enabled %}
                    <span class="status-badge status-warning">Disabled</span>
                {% else if m.side == "CLIENT" %}
                    <span class="status-badge status-warning">Warning</span>
                {% else %}
                    <span class="status-badge status-running">Active</span>
                {% endif %}
                {% if let Some(reason) = m.rejection_reason %}
                <div style="font-size:0.8rem;color:var(--err);margin-top:0.25rem">{{ reason }}</div>
                {% endif %}
            </td>
            <td>{{ m.created_at }}</td>
            <td style="white-space:nowrap">
                <form action="/instances/{{ instance_id }}/mods/{{ m.id }}/toggle" method="post" style="display:inline">
                    <button type="submit" class="btn-sm {% if m.enabled %}btn{% else %}btn-ok{% endif %}">
                        {% if m.enabled %}Disable{% else %}Enable{% endif %}
                    </button>
                </form>
                <form action="/instances/{{ instance_id }}/mods/{{ m.id }}/delete" method="post" style="display:inline"
                      onsubmit="return confirm('Permanently remove this mod?')">
                    <button type="submit" class="btn-danger btn-sm">Delete</button>
                </form>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<form id="batch-form" method="post" style="display:none"></form>

<div class="batch-bar" style="margin-top:0.75rem;display:flex;gap:0.5rem;align-items:center">
    <span style="font-size:0.85rem;color:var(--fg-muted)">With selected:</span>
    <button type="button" class="btn" id="batch-toggle-btn2" onclick="batchSubmit('toggle')">Toggle</button>
    <button type="button" class="btn-danger"
            onclick="if(confirm('Permanently delete selected mods?')) batchSubmit('delete')">Delete</button>
</div>
{% endif %}

<div style="margin-top:1rem">
    <form action="/instances/{{ instance_id }}/mods/rescan" method="post" style="display:inline">
        <button type="submit" class="btn">Rescan All Mods</button>
    </form>
</div>

<script>
function toggleAll(source) {
    document.querySelectorAll('input[name="mod_id"]').forEach(cb => cb.checked = source.checked);
}

function batchSubmit(action) {
    const checked = document.querySelectorAll('input[name="mod_id"]:checked');
    if (checked.length === 0) return;

    const form = document.querySelector('#batch-form');
    // Clear any previous hidden inputs
    form.textContent = '';
    form.action = '/instances/{{ instance_id }}/mods/batch-' + action;

    for (const cb of checked) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'mod_id';
        input.value = cb.value;
        form.append(input);
    }

    form.submit();
}
</script>

<style>
.row-dim { opacity: 0.55; }
.row-dim:hover { opacity: 0.85; }
</style>
{% endblock %}