{% extends "fitcheck/base.html" %}

{% load i18n %}

{% block fitcheck_content %}
    {% if not sde_loaded %}
        <div class="alert alert-warning d-flex align-items-center gap-2">
            <i class="fa-solid fa-database"></i>
            <div>
                {% translate "EVE game data is still loading in the background - ship validation won't return results until it finishes. Reload in a minute. If it never completes, an administrator should run" %}
                <code>python manage.py fitcheck_load_sde</code>.
            </div>
        </div>
    {% endif %}
    <div class="card mb-3">
        <div class="card-body d-flex flex-wrap align-items-center gap-3">
            {% if main_character %}
                <img class="rounded-circle" width="48" height="48" alt=""
                     src="https://images.evetech.net/characters/{{ main_character.character_id }}/portrait?size=64">
            {% endif %}
            <div>
                <div class="fc-eyebrow">{% translate "Pilot Fittings" %}</div>
                <div class="small text-muted">
                    {% translate "Pick real ships from your hangars - across every character on this account - and validate them against the published standards. Only you can see your results here." %}
                </div>
            </div>
            <div class="ms-auto d-flex flex-wrap align-items-center gap-3">
                <form method="post" action="{% url 'fitcheck:toggle_notification_mute' %}"
                      class="form-check form-switch mb-0" title="{% translate 'Suppresses every Fit Check notification for your account, including any Discord relay.' %}">
                    {% csrf_token %}
                    <input class="form-check-input" type="checkbox" role="switch" id="mute-notifications"
                           name="mute_all" onchange="this.form.submit()" {% if notifications_muted %}checked{% endif %}>
                    <label class="form-check-label small" for="mute-notifications">
                        {% translate "Mute notifications" %}
                    </label>
                </form>
                <a class="btn btn-primary" href="{% url 'fitcheck:ship_inventory' %}">
                    <i class="fa-solid fa-rocket"></i> {% translate "My Ships" %}
                </a>
            </div>
        </div>
    </div>

    <form method="get" class="card mb-3">
        <div class="card-body d-flex flex-wrap gap-2 align-items-end">
            <div>
                <label class="form-label small mb-1">{% translate "Status" %}</label>
                <select class="form-select form-select-sm" name="status" onchange="this.form.submit()">
                    <option value="">{% translate "All statuses" %}</option>
                    {% for value, label in statuses.choices %}
                        <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="form-label small mb-1">{% translate "Verdict" %}</label>
                <select class="form-select form-select-sm" name="verdict" onchange="this.form.submit()">
                    <option value="">{% translate "All verdicts" %}</option>
                    {% for value, label in verdicts.choices %}
                        <option value="{{ value }}" {% if verdict_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="form-label small mb-1">{% translate "Doctrine" %}</label>
                <select class="form-select form-select-sm" name="doctrine" onchange="this.form.submit()">
                    <option value="">{% translate "All doctrines" %}</option>
                    {% if has_source_default_submissions %}
                        <option value="{{ no_doctrine_filter_value }}" {% if doctrine_filter == no_doctrine_filter_value %}selected{% endif %}>
                            {% translate "Source defaults" %}
                        </option>
                    {% endif %}
                    {% for doctrine in doctrines %}
                        <option value="{{ doctrine.pk }}" {% if doctrine_filter == doctrine.pk|stringformat:'s' %}selected{% endif %}>{{ doctrine.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="form-label small mb-1">{% translate "Character" %}</label>
                <select class="form-select form-select-sm" name="character" onchange="this.form.submit()">
                    <option value="">{% translate "All characters" %}</option>
                    {% for character in characters %}
                        <option value="{{ character.pk }}" {% if character_filter == character.pk|stringformat:'s' %}selected{% endif %}>{{ character.character_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div style="max-width: 11rem">
                <label class="form-label small mb-1">{% translate "Ship Type" %}</label>
                <input class="form-control form-control-sm" type="search" name="ship"
                       value="{{ ship_filter }}" placeholder="{% translate 'e.g. Hel' %}">
            </div>
            <button class="btn btn-sm btn-primary" type="submit">
                <i class="fa-solid fa-filter"></i> {% translate "Filter" %}
            </button>
            <a class="btn btn-sm btn-secondary" href="{% url 'fitcheck:pilot_fittings' %}">{% translate "Clear" %}</a>
        </div>
    </form>

    <form method="post" action="{% url 'fitcheck:submissions_delete_bulk' %}"
          onsubmit="return confirm('{% translate "Remove the selected submissions? Pending ones are deleted; rejected ones are hidden from your history only." %}')">
        {% csrf_token %}
        <div class="fc-section-head d-flex align-items-center gap-2">
            <i class="fa-solid fa-clock-rotate-left"></i>
            <span>{% translate "My validation history" %}</span>
            <button type="submit" class="btn btn-sm btn-danger ms-auto" id="bulk-delete-btn" disabled>
                <i class="fa-solid fa-trash"></i>
                <span id="bulk-delete-count">{% translate "Remove selected" %}</span>
            </button>
        </div>
        <div class="card">
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width: 2.5rem">
                                <input class="form-check-input" type="checkbox" id="check-all"
                                       title="{% translate 'Select/deselect all removable submissions' %}">
                            </th>
                            <th>#</th>
                            <th>{% translate "Character" %}</th>
                            <th>{% translate "Ship" %}</th>
                            <th>{% translate "Checked Against" %}</th>
                            <th>{% translate "Verdict" %}</th>
                            <th>{% translate "Status" %}</th>
                            <th>{% translate "Submitted" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for submission in submissions %}
                            <tr>
                                <td>
                                    {% if submission.status == "P" or submission.status == "R" %}
                                        <input class="form-check-input bulk-delete-check" type="checkbox"
                                               name="submission_pks" value="{{ submission.pk }}">
                                    {% endif %}
                                </td>
                                <td><a href="{% url 'fitcheck:submission_detail' submission.pk %}">#{{ submission.pk }}</a></td>
                                <td class="small">{{ submission.character|default:"-" }}</td>
                                <td>
                                    {% if submission.ship_type_id %}
                                        <img class="fc-module-icon" width="24" height="24" alt=""
                                             src="https://images.evetech.net/types/{{ submission.ship_type_id }}/icon?size=32">
                                    {% endif %}
                                    {{ submission.ship_type.name|default:"?" }}
                                    {% if submission.ship_name %}
                                        <div class="small text-muted fst-italic">&ldquo;{{ submission.ship_name }}&rdquo;</div>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ submission.doctrine_fit.name }}
                                    {% if submission.doctrine %}
                                        <span class="fc-chip ms-1">{{ submission.doctrine.name }}</span>
                                    {% endif %}
                                </td>
                                <td>{% include "fitcheck/partials/verdict_badge.html" %}</td>
                                <td>
                                    {% include "fitcheck/partials/status_badge.html" %}
                                    {% if submission.is_stale %}
                                        <span class="badge bg-secondary" title="{% translate 'The fitting standard changed after this check' %}">
                                            {% translate "stale" %}
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="small">{{ submission.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="8" class="p-4 text-center text-muted">
                                    {% translate "Nothing validated yet - start with your inventory." %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>
    {% include "fitcheck/partials/pagination.html" %}
{% endblock %}

{% block extra_javascript %}
    <script>
        (function () {
            const all = document.getElementById("check-all");
            const boxes = document.querySelectorAll(".bulk-delete-check");
            const btn = document.getElementById("bulk-delete-btn");
            const counter = document.getElementById("bulk-delete-count");
            if (!btn) return;
            const defaultLabel = counter.textContent;
            function refresh() {
                const n = Array.from(boxes).filter(b => b.checked).length;
                btn.disabled = n === 0;
                counter.textContent = n === 0
                    ? defaultLabel
                    : "{% translate 'Remove' %} " + n;
            }
            if (all) {
                all.addEventListener("change", () => {
                    boxes.forEach(b => b.checked = all.checked);
                    refresh();
                });
            }
            boxes.forEach(b => b.addEventListener("change", refresh));
        })();
    </script>
{% endblock %}