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

{% load i18n %}

{% block fitcheck_content %}
    <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 gap-2">
                <a class="btn btn-secondary" href="{% url 'fitcheck:esi_saved_fittings' %}">
                    <i class="fa-solid fa-folder-open"></i> {% translate "Import my saved fittings" %}
                </a>
                <a class="btn btn-primary" href="{% url 'fitcheck:ship_inventory' %}">
                    <i class="fa-solid fa-rocket"></i> {% translate "Validate ships from my inventory" %}
                </a>
            </div>
        </div>
    </div>

    <form method="post" action="{% url 'fitcheck:submissions_delete_bulk' %}"
          onsubmit="return confirm('{% translate "Delete the selected submissions?" %}')">
        {% 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 "Delete 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-pending"
                                       title="{% translate 'Select/deselect all pending 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" %}
                                        <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>
{% endblock %}

{% block extra_javascript %}
    <script>
        (function () {
            const all = document.getElementById("check-all-pending");
            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 'Delete' %} " + n;
            }
            if (all) {
                all.addEventListener("change", () => {
                    boxes.forEach(b => b.checked = all.checked);
                    refresh();
                });
            }
            boxes.forEach(b => b.addEventListener("change", refresh));
        })();
    </script>
{% endblock %}