{% load i18n %}
<div class="modal fade" id="bpcPrices{{ listing.pk }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" action="{% url 'backoffice:save_bpc_prices' shop.pk listing.pk %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">{{ listing.eve_type.name }} — {% trans "prices" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <table class="table align-middle mb-0">
                        <thead><tr>
                            <th title="{% trans 'Hide from storefront' %}">{% trans "Hide" %}</th>
                            <th>{% trans "ME/TE" %}</th><th>{% trans "Runs" %}</th>
                            <th>{% trans "Stock" %}</th><th>{% trans "Price (ISK, 0 = Ask)" %}</th>
                        </tr></thead>
                        <tbody>
                        {% for v in listing.variants.all %}
                            <tr class="{% if v.hidden %}opacity-50{% endif %}">
                                <td>
                                    <button type="button" class="btn btn-sm btn-link p-0 bpc-hide-toggle" data-target="hidden_box_{{ v.pk }}"
                                            title="{% trans 'Hide from storefront' %}">
                                        <i class="{% if v.hidden %}fa-solid fa-eye-slash text-warning{% else %}fa-regular fa-eye text-muted{% endif %}"></i>
                                    </button>
                                    <input type="checkbox" name="hidden_{{ v.pk }}" id="hidden_box_{{ v.pk }}" hidden {% if v.hidden %}checked{% endif %}>
                                </td>
                                <td>{{ v.me }}/{{ v.te }}</td><td>{{ v.runs }}</td><td>{{ v.stock }}</td>
                                <td>
                                    <div class="input-group input-group-sm" style="max-width: 12rem;">
                                        <input type="number" min="0" name="price_{{ v.pk }}" value="{{ v.price }}" class="form-control">
                                        <span class="input-group-text bpc-denom" style="min-width: 4rem; justify-content: center;">{{ v.price_denom }}</span>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </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 "Save prices" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
