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

<div id="lowx" class="position-absolute top-0 start-0">
    {% with slots.low|stringformat:"s" as low_slot_id %}
        {% with "fittings/img/pannel/"|add:low_slot_id|add:"l.png" as low_slots_grid %}
            <img class="rounded border-0" src="{% static low_slots_grid %}" alt="Low Slots">
        {% endwith %}
    {% endwith %}
</div>

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

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

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

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

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

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

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

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