{% load i18n %}
{# Bootstrap fit table for the back-office order modal. `fit` = fit_display_groups() output. #}
<table class="table table-sm align-middle mb-0">
    <tbody>
        {% for group in fit.fitting %}
        <tr><th colspan="2" class="pt-3 pb-1 small text-uppercase fw-bold border-bottom">{{ group.label }} <span class="text-muted fw-normal">({{ group.count }})</span></th></tr>
        {% for item in group.items %}
        <tr>
            <td><img src="https://images.evetech.net/types/{{ item.type_id }}/icon?size=32" width="20" height="20" class="me-1" alt="">{{ item.name }}</td>
            <td class="text-end text-muted">{% if item.charge %}{{ item.charge.name }}{% endif %}</td>
        </tr>
        {% endfor %}
        {% endfor %}
        {% if fit.drones %}
        <tr><th colspan="2" class="pt-3 pb-1 small text-uppercase fw-bold border-bottom">{% trans "Drones" %}</th></tr>
        {% for d in fit.drones %}
        <tr><td><img src="https://images.evetech.net/types/{{ d.type_id }}/icon?size=32" width="20" height="20" class="me-1" alt="">{{ d.name }}</td><td class="text-end text-muted">×{{ d.qty }}</td></tr>
        {% endfor %}
        {% endif %}
        {% if fit.cargo %}
        <tr><th colspan="2" class="pt-3 pb-1 small text-uppercase fw-bold border-bottom">{% trans "Cargo" %}</th></tr>
        {% for c in fit.cargo %}
        <tr><td><img src="https://images.evetech.net/types/{{ c.type_id }}/icon?size=32" width="20" height="20" class="me-1" alt="">{{ c.name }}</td><td class="text-end text-muted">×{{ c.qty }}</td></tr>
        {% endfor %}
        {% endif %}
        {% if fit.manifest %}
        <tr><th colspan="2" class="pt-3 pb-1 small text-uppercase fw-bold border-bottom">{% trans "Also included" %}</th></tr>
        {% for m in fit.manifest %}
        <tr><td><img src="https://images.evetech.net/types/{{ m.type_id }}/icon?size=32" width="20" height="20" class="me-1" alt="">{{ m.name }} <span class="text-muted small">· {{ m.location }}</span></td><td class="text-end text-muted">×{{ m.qty }}</td></tr>
        {% endfor %}
        {% endif %}
    </tbody>
</table>