{% extends 'shop/base.html' %}
{% load i18n static %}

{% block extra_css %}<link rel="stylesheet" href="{% static 'shop/backoffice.css' %}">{% endblock %}

{% block content %}
{% include 'shop/_manage_header.html' with active='manage' %}
{% include 'shop/_section_tabs.html' %}

{% if missing_token_chars %}
<div class="alert alert-warning">
    {% blocktrans with names=missing_token_chars|join:", " %}No blueprint access for: {{ names }}. Variants can't be read until that character grants the blueprints scope.{% endblocktrans %}
</div>
{% endif %}

{% include 'shop/_stockrooms.html' %}

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
    <h4 class="m-0">{% trans "Blueprint copies" %}</h4>
</div>
{% trans "Search blueprints…" as list_search_placeholder %}
<div data-table data-page-size="25">
{% include 'shop/_list_search.html' with placeholder=list_search_placeholder %}
<table class="table table-striped align-middle">
    <thead><tr>
        <th></th><th data-sort="text" data-sort-default="asc">{% trans "Type" %}</th><th data-sort="num">{% trans "Variants" %}</th>
        <th data-sort="num">{% trans "Stock" %}</th><th data-sort="num">{% trans "Runs" %}</th>
        <th>{% trans "Price / run" %}</th><th></th>
    </tr></thead>
    <tbody>
    {% for listing in listings %}
        <tr data-name="{{ listing.eve_type.name|lower }}">
            <td class="text-nowrap">
                <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/bpc?size=32" alt="" width="32" height="32">
                {% include 'shop/_featured_star.html' %}
            </td>
            <td>{{ listing.eve_type.name }}</td>
            <td data-sort-value="{{ listing.variant_count }}">{{ listing.variant_count }}</td>
            <td data-sort-value="{{ listing.total_stock }}">{{ listing.total_stock }}</td>
            <td data-sort-value="{{ listing.total_runs }}">{{ listing.total_runs }}</td>
            <td class="text-nowrap">{{ listing.per_run_range_display }}</td>
            <td class="text-end">
                <button type="button" class="btn btn-sm btn-outline-theme" data-bs-toggle="modal" data-bs-target="#bpcPrices{{ listing.pk }}">
                    <i class="fa-solid fa-tags fa-fw"></i> {% trans "Edit prices" %}
                </button>
            </td>
        </tr>
    {% empty %}
        <tr><td colspan="7" class="text-muted">{% trans "No blueprint copies found in the stockrooms yet." %}</td></tr>
    {% endfor %}
    </tbody>
</table>
<nav data-table-pager class="mt-2"></nav>
</div>

{% include 'shop/_source_picker.html' %}
{% for listing in listings %}{% include 'shop/_bpc_prices_modal.html' %}{% endfor %}

<script>
(function () {
    function formatIsk(amount) {
        amount = parseInt(amount, 10);
        if (!amount || amount <= 0) return "";
        var units = [[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "K"]];
        for (var i = 0; i < units.length; i++) {
            if (amount >= units[i][0]) {
                var v = (amount / units[i][0]).toFixed(2).replace(/\.?0+$/, "");
                return v + units[i][1];
            }
        }
        return amount.toLocaleString();
    }
    document.addEventListener("input", function (e) {
        var input = e.target;
        if (!input.matches || !input.matches("input[name^='price_']")) return;
        var denom = input.parentNode.querySelector(".bpc-denom");
        if (denom) denom.textContent = formatIsk(input.value) || "Ask";
    });
    document.addEventListener("click", function (e) {
        var btn = e.target.closest ? e.target.closest(".bpc-hide-toggle") : null;
        if (!btn) return;
        e.preventDefault();
        var box = document.getElementById(btn.dataset.target);
        box.checked = !box.checked;
        btn.querySelector("i").className = box.checked
            ? "fa-solid fa-eye-slash text-warning"
            : "fa-regular fa-eye text-muted";
        btn.closest("tr").classList.toggle("opacity-50", box.checked);
    });
})();
</script>
{% endblock %}

{% block extra_javascript %}
<script src="{% static 'shop/backoffice_tables.js' %}"></script>
{% endblock %}