{% load static %}
{% load evelinks %}

{% if slots.sub %}
    <div id="subx" class="position-absolute top-0 start-0">
        {% with slots.sub|stringformat:"s" as sub_slot_id %}
            {% with "fittings/img/pannel/"|add:sub_slot_id|add:"s.png" as sub_slots_grid %}
                <img class="rounded border-0" src="{% static sub_slots_grid %}" alt="Subsystem Slots">
            {% endwith %}
        {% endwith %}
    </div>

    {% if fitting.SubSystemSlot0 %}
        <div id="sub1" class="position-absolute fitting-item">
            <img
                class="rounded"
                src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}"
                title="{{ fitting.SubSystemSlot0.item_name }}"
                alt="{{ fitting.SubSystemSlot0.item_name }}"
                data-bs-tooltip="aa-fittings"
            >
        </div>
    {% endif %}

    {% if fitting.SubSystemSlot1 %}
        <div id="sub2" class="position-absolute fitting-item">
            <img
                class="rounded"
                src="{{ fitting.SubSystemSlot1.type_id|type_icon_url:32 }}"
                title="{{ fitting.SubSystemSlot1.item_name }}"
                alt="{{ fitting.SubSystemSlot1.item_name }}"
                data-bs-tooltip="aa-fittings"
            >
        </div>
    {% endif %}

    {% if fitting.SubSystemSlot2 %}
        <div id="sub3" class="position-absolute fitting-item">
            <img
                class="rounded"
                src="{{ fitting.SubSystemSlot2.type_id|type_icon_url:32 }}"
                title="{{ fitting.SubSystemSlot2.item_name }}"
                alt="{{ fitting.SubSystemSlot2.item_name }}"
                data-bs-tooltip="aa-fittings"
            >
        </div>
    {% endif %}

    {% if fitting.SubSystemSlot3 %}
        <div id="sub4" class="position-absolute fitting-item">
            <img
                class="rounded"
                src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}"
                title="{{ fitting.SubSystemSlot3.item_name }}"
                alt="{{ fitting.SubSystemSlot3.item_name }}"
                data-bs-tooltip="aa-fittings"
            >
        </div>
    {% endif %}
{% endif %}