{% load i18n %}
<div class="modal fade" id="addStockroomModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{% url 'backoffice:add_stockroom' shop.pk section %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">{% trans "Add stockroom" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{% if shop.shop_type == 'corporation' %}{% trans "Corporation" %}{% else %}{% trans "Character" %}{% endif %}</label>
                        <select name="owner_id" id="src-character" class="form-select" required></select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{% if shop.shop_type == 'corporation' %}{% trans "Division" %}{% else %}{% trans "Station" %}{% endif %}</label>
                        <select name="location_id" id="src-station" class="form-select" required></select>
                    </div>
                    {% if section != 'fitted' %}
                    <div class="mb-1">
                        <label class="form-label">{% trans "Container" %}</label>
                        <select name="container_item_id" id="src-container" class="form-select"></select>
                    </div>
                    <div class="form-text">{% trans "Adding a stockroom lists what's found there and computes stock." %}</div>
                    {% endif %}
                    {% if section == 'fitted' %}
                    <div class="mb-3">
                        <label class="form-label">{% trans "Name filter" %}</label>
                        <input type="text" name="name_filter" class="form-control" placeholder="{% trans 'e.g. [SALE] — blank lists every ship here' %}">
                    </div>
                    <div class="form-check mb-1">
                        <input type="checkbox" class="form-check-input" name="strip_marker" id="src-strip" checked>
                        <label class="form-check-label" for="src-strip">{% trans "Strip the filter text from the shown ship name" %}</label>
                    </div>
                    <div class="form-text">{% trans "Only assembled ships whose name contains the filter are listed." %}</div>
                    {% endif %}
                    {% if section == 'hulls' or section == 'modules' %}
                    <hr>
                    <label class="form-label d-block">{% trans "Default price for new hulls" %}</label>
                    <div class="btn-group mb-2" role="group">
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-ask" value="fixed" autocomplete="off" checked>
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-ask">{% trans "Ask" %}</label>
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-buy" value="jita_buy_pct" autocomplete="off">
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-buy">{% trans "% Jita Buy" %}</label>
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-sell" value="jita_sell_pct" autocomplete="off">
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-sell">{% trans "% Jita Sell" %}</label>
                    </div>
                    <div data-price-pct>
                        <div class="input-group">
                            <input type="number" min="0" step="0.01" name="price_pct" class="form-control" placeholder="{% trans 'Percent, e.g. 90' %}">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="form-text">{% trans "Only newly-listed hulls get this price; existing hulls keep theirs." %}</div>
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary">{% trans "Add stockroom" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{ source_tree|json_script:"source-tree-data" }}
<script>
(function () {
    // json_script HTML-escapes the payload safely (player-set container names can't
    // break out of a <script> block the way a raw |safe dump could).
    const TREE = JSON.parse(document.getElementById("source-tree-data").textContent);
    const $c = document.getElementById("src-character"),
          $s = document.getElementById("src-station"),
          $k = document.getElementById("src-container");
    const opt = (v, l) => { const o = document.createElement("option"); o.value = v; o.textContent = l; return o; };
    const curC = () => TREE.find(c => String(c.owner_id) === $c.value);
    const curS = () => { const c = curC(); return c && c.locations.find(s => String(s.location_id) === $s.value); };
    function fillK() {
        if (!$k) return;
        $k.innerHTML = ""; $k.appendChild(opt("", "{% trans 'Whole station' %}"));
        const s = curS(); (s ? s.containers : []).forEach(ct => $k.appendChild(opt(ct.item_id, ct.name)));
    }
    function fillS() {
        $s.innerHTML = ""; const c = curC();
        (c ? c.locations : []).forEach(s => $s.appendChild(opt(s.location_id, s.name))); fillK();
    }
    function fillC() {
        $c.innerHTML = ""; TREE.forEach(c => $c.appendChild(opt(c.owner_id, c.owner_name))); fillS();
    }
    $c.addEventListener("change", fillS); $s.addEventListener("change", fillK); fillC();
})();
</script>