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

<div id="midx" class="position-absolute top-0 start-0">
    {% with slots.med|stringformat:"s" as med_slot_id %}
        {% with "fittings/img/pannel/"|add:med_slot_id|add:"m.png" as med_slots_grid %}
            <img class="rounded border-0" src="{% static med_slots_grid %}" alt="Med Slots">
        {% endwith %}
    {% endwith %}
</div>

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

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

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

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

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

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

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

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