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

{% load i18n %}

{% block fitcheck_content %}
    <div class="card mb-3">
        <div class="card-body fc-ship-row">
            <img src="https://images.evetech.net/types/{{ fit.ship_type_id }}/render?size=64"
                 alt="" width="48" height="48">
            <div>
                <div class="fc-eyebrow">
                    {% translate "Member inventory" %} &middot;
                    {% blocktranslate %}scope: {{ scope_label }}{% endblocktranslate %}
                </div>
                <h4 class="mb-1">{{ fit.name }}</h4>
                <div class="small text-muted">{{ fit.ship_type.name }} &middot; v{{ fit.version }}</div>
            </div>
            <div class="ms-auto">
                <a class="btn btn-secondary" href="{% url 'fitcheck:fit_detail' fit.pk %}">
                    <i class="fa-solid fa-arrow-left"></i> {% translate "Back to fitting" %}
                </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 class="flex-grow-1" style="max-width: 22rem">
                <label class="form-label small mb-1">{% translate "Pilot name contains" %}</label>
                <input class="form-control form-control-sm" type="search" name="q"
                       value="{{ filters.q }}"
                       placeholder="{% translate 'e.g. TrueMessenger, Astrid...' %}">
            </div>
            {% if show_corp_filter %}
                <div>
                    <label class="form-label small mb-1">{% translate "Corporation" %}</label>
                    <select class="form-select form-select-sm" name="corp">
                        <option value="">{% translate "All corps" %}</option>
                        {% for corp in corps %}
                            <option value="{{ corp.corporation_id }}"
                                    {% if filters.corp == corp.corporation_id|stringformat:"s" %}selected{% endif %}>
                                {{ corp.corporation_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            <div class="form-check ms-2 mb-1">
                <input class="form-check-input" type="checkbox" name="granted" value="1"
                       id="granted-only" {% if filters.granted %}checked{% endif %}>
                <label class="form-check-label small" for="granted-only">
                    {% translate "Only pilots with asset token" %}
                </label>
            </div>
            <button class="btn btn-sm btn-primary" type="submit">
                <i class="fa-solid fa-filter"></i> {% translate "Filter" %}
            </button>
            {% if filters.q or filters.corp or filters.granted %}
                <a class="btn btn-sm btn-secondary"
                   href="{% url 'fitcheck:member_inventory_for_fit' fit.pk %}">{% translate "Clear" %}</a>
            {% endif %}
        </div>
    </form>

    {% if without_token %}
        <div class="alert alert-warning d-flex align-items-start gap-2">
            <i class="fa-solid fa-key mt-1"></i>
            <div>
                <strong>{{ without_token|length }}</strong>
                {% translate "pilot(s) in scope have not granted an asset-scope token and were skipped:" %}
                <div class="small mt-1">
                    {% for character in without_token %}
                        {{ character.character_name }}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
    {% for name, reason in errors.items %}
        <div class="alert alert-danger small">{{ name }}: {{ reason }}</div>
    {% endfor %}

    <form method="post" action="?{{ querystring }}">
        {% csrf_token %}
        <div class="fc-toolbar d-flex align-items-center gap-2 flex-wrap">
            <div class="fc-eyebrow">
                {{ ship_rows|length }} {% translate "ship(s) of this hull found in scope" %}
            </div>
            {% if ship_rows %}
                <div class="ms-auto d-flex align-items-center gap-3">
                    <div class="form-check mb-0">
                        <input class="form-check-input" type="checkbox" id="fc-select-all">
                        <label class="form-check-label small" for="fc-select-all">
                            {% translate "Select all" %}
                        </label>
                    </div>
                    <button type="submit" class="btn btn-sm btn-success">
                        <i class="fa-solid fa-clipboard-check"></i>
                        {% translate "Audit selected" %}
                    </button>
                </div>
            {% endif %}
        </div>

        <p class="small text-muted mb-3">
            {% translate "Select the ships to check against this fitting, then Audit selected. Only ships you audit are graded and recorded." %}
        </p>

        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
            {% for row in ship_rows %}
                <div class="col">
                    <div class="fc-card p-3 h-100 fc-ship-toggle {% if row.audited %}border-info{% endif %}"
                         style="cursor: pointer">
                        <div class="fc-ship-row">
                            <input class="form-check-input fc-ship-check mt-0" type="checkbox"
                                   name="ships"
                                   value="{{ row.ship.character_id }}:{{ row.ship.item_id }}"
                                   id="ship-{{ row.ship.item_id }}"
                                   aria-label="{% blocktranslate with name=row.ship.ship_name|default:row.ship.type_name %}Select {{ name }} for audit{% endblocktranslate %}">
                            <img src="https://images.evetech.net/types/{{ row.ship.type_id }}/render?size=64"
                                 alt="" width="56" height="56">
                            <div class="flex-grow-1">
                                <div>
                                    <strong>{{ row.ship.ship_name|default:row.ship.type_name }}</strong>
                                </div>
                                <div class="small text-muted">
                                    <i class="fa-solid fa-user-astronaut me-1"></i>{{ row.ship.character_name }}
                                </div>
                                <div class="small text-muted">
                                    <i class="fa-solid fa-location-dot me-1"></i>{{ row.ship.location_name }}
                                    {% if row.ship.system_name %}
                                        <br><i class="fa-solid fa-map-location-dot me-1"></i>{{ row.ship.system_name }}{% if row.ship.region_name %} &middot; {{ row.ship.region_name }}{% endif %}
                                    {% endif %}
                                </div>
                                <div class="mt-1">
                                    {% if row.audited %}
                                        {% if row.verdict == "COMPLIANT" %}
                                            <span class="badge bg-success">{% translate "Compliant" %}</span>
                                        {% elif row.verdict == "COMPLIANT_SUBS" %}
                                            <span class="badge bg-info">{% translate "Compliant (subs)" %}</span>
                                        {% elif row.verdict == "NON_COMPLIANT" %}
                                            <span class="badge bg-danger">{% translate "Non-compliant" %}</span>
                                        {% elif row.verdict == "ERROR" %}
                                            <span class="badge bg-warning">{% translate "Error" %}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{% translate "Not validated" %}</span>
                                        {% endif %}
                                        {% if row.submission_pk %}
                                            <a class="small ms-2"
                                               href="{% url 'fitcheck:submission_detail' row.submission_pk %}">
                                                {% translate "details" %}
                                            </a>
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-secondary">{% translate "Not audited" %}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="fc-empty">
                        <i class="fa-solid fa-satellite-dish fa-2x mb-3 d-block"></i>
                        {% translate "No ships of this hull found among the pilots in scope." %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </form>

    <script>
        (function () {
            // Progressive enhancement only: every checkbox already submits on its
            // own, so the page works with JS disabled.
            var master = document.getElementById("fc-select-all");
            var boxes = document.querySelectorAll(".fc-ship-check");

            // "Select all" mirrors its state onto every ship checkbox.
            if (master) {
                master.addEventListener("change", function () {
                    boxes.forEach(function (b) { b.checked = master.checked; });
                });
            }

            // Clicking anywhere on a card toggles its checkbox - except when the
            // click lands on the checkbox itself or a link (e.g. "details"), which
            // keep their own behaviour.
            document.querySelectorAll(".fc-ship-toggle").forEach(function (card) {
                card.addEventListener("click", function (e) {
                    if (e.target.closest("a") || e.target.classList.contains("fc-ship-check")) {
                        return;
                    }
                    var box = card.querySelector(".fc-ship-check");
                    if (box) { box.checked = !box.checked; }
                });
            });
        })();
    </script>
{% endblock %}