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

<div id="rigx" class="position-absolute top-0 start-0">
    {% with slots.rig|stringformat:"s" as rig_slot_id %}
        {% with "fittings/img/pannel/"|add:rig_slot_id|add:"r.png" as rig_slots_grid %}
            <img class="rounded border-0" src="{% static rig_slots_grid %}" alt="Rig Slots">
        {% endwith %}
    {% endwith %}
</div>

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

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

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