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

<div id="highx" class="position-absolute top-0 start-0">
    {% with slots.high|stringformat:"s" as high_slot_id %}
        {% with "fittings/img/pannel/"|add:high_slot_id|add:"h.png" as high_slots_grid %}
            <img class="rounded border-0" src="{% static high_slots_grid %}" alt="High Slots">
        {% endwith %}
    {% endwith %}
</div>

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

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

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

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

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

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

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

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