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

<div id="Fitting_Panel" style="position: relative; height:398px; width:398px; z-index: 3; margin: 0 auto;" >
    <div id="mask" style="position:absolute; left: 0px; top: 0px; width:398px; height:398px; z-index:-1;">
        <img style="position:absolute; left: 0px; top: 0px;  height:398px; width:398px; border:0px" src="{% static 'structures/img/pannel/tyrannis.png' %}" alt="" />
    </div>

    <div id="highx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
        <img src="{{ slots.high }}" alt="" style="border:0px;" />
    </div>
    <div id="high1" style="position:absolute; left:73px; top:60px; width:32px; height:32px;">{% if assets_grouped.HiSlot0 %}<img src="{{ assets_grouped.HiSlot0.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot0.eve_type.name }}">{% endif %}</div>
    <div id="high2" style="position:absolute; left:102px; top:42px; width:32px; height:32px;">{% if assets_grouped.HiSlot1 %}<img src="{{ assets_grouped.HiSlot1.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot1.eve_type.name }}">{% endif %}</div>
    <div id="high3" style="position:absolute; left:134px; top:27px; width:32px; height:32px;">{% if assets_grouped.HiSlot2 %}<img src="{{ assets_grouped.HiSlot2.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot2.eve_type.name }}">{% endif %}</div>
    <div id="high4" style="position:absolute; left:169px; top:21px; width:32px; height:32px;">{% if assets_grouped.HiSlot3 %}<img src="{{ assets_grouped.HiSlot3.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot3.eve_type.name }}">{% endif %}</div>
    <div id="high5" style="position:absolute; left:203px; top:22px; width:32px; height:32px;">{% if assets_grouped.HiSlot4 %}<img src="{{ assets_grouped.HiSlot4.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot4.eve_type.name }}">{% endif %}</div>
    <div id="high6" style="position:absolute; left:238px; top:30px; width:32px; height:32px;">{% if assets_grouped.HiSlot5 %}<img src="{{ assets_grouped.HiSlot5.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot5.eve_type.name }}">{% endif %}</div>
    <div id="high7" style="position:absolute; left:270px; top:45px; width:32px; height:32px;">{% if assets_grouped.HiSlot6 %}<img src="{{ assets_grouped.HiSlot6.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot6.eve_type.name }}">{% endif %}</div>
    <div id="high8" style="position:absolute; left:295px; top:64px; width:32px; height:32px;">{% if assets_grouped.HiSlot7 %}<img src="{{ assets_grouped.HiSlot7.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.HiSlot7.eve_type.name }}">{% endif %}</div>

    <div id="midx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
        <img src="{{ slots.med }}" alt="" style="border:0px;" />
    </div>
    <div id="mid1" style="position:absolute; left:26px; top:140px; width:32px; height:32px;">{% if assets_grouped.MedSlot0 %}<img src="{{ assets_grouped.MedSlot0.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot0.eve_type.name }}">{% endif %}</div>
    <div id="mid2" style="position:absolute; left:24px; top:176px; width:32px; height:32px;">{% if assets_grouped.MedSlot1 %}<img src="{{ assets_grouped.MedSlot1.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot1.eve_type.name }}">{% endif %}</div>
    <div id="mid3" style="position:absolute; left:23px; top:212px; width:32px; height:32px;">{% if assets_grouped.MedSlot2 %}<img src="{{ assets_grouped.MedSlot2.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot2.eve_type.name }}">{% endif %}</div>
    <div id="mid4" style="position:absolute; left:30px; top:245px; width:32px; height:32px;">{% if assets_grouped.MedSlot3 %}<img src="{{ assets_grouped.MedSlot3.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot3.eve_type.name }}">{% endif %}</div>
    <div id="mid5" style="position:absolute; left:46px; top:278px; width:32px; height:32px;">{% if assets_grouped.MedSlot4 %}<img src="{{ assets_grouped.MedSlot4.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot4.eve_type.name }}">{% endif %}</div>
    <div id="mid6" style="position:absolute; left:69px; top:304px; width:32px; height:32px;">{% if assets_grouped.MedSlot5 %}<img src="{{ assets_grouped.MedSlot5.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot5.eve_type.name }}">{% endif %}</div>
    <div id="mid7" style="position:absolute; left:100px; top:328px; width:32px; height:32px;">{% if assets_grouped.MedSlot6 %}<img src="{{ assets_grouped.MedSlot6.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot6.eve_type.name }}">{% endif %}</div>
    <div id="mid8" style="position:absolute; left:133px; top:342px; width:32px; height:32px;">{% if assets_grouped.MedSlot7 %}<img src="{{ assets_grouped.MedSlot7.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.MedSlot7.eve_type.name }}">{% endif %}</div>

    <div id="lowx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
        <img src="{{ slots.low }}" alt="" style="border:0px;" />
    </div>
    <div id="low1" style="position:absolute; left:344px; top:143px; width:32px; height:32px;">{% if assets_grouped.LoSlot0 %}<img src="{{ assets_grouped.LoSlot0.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot0.eve_type.name }}">{% endif %}</div>
    <div id="low2" style="position:absolute; left:350px; top:178px; width:32px; height:32px;">{% if assets_grouped.LoSlot1 %}<img src="{{ assets_grouped.LoSlot1.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot1.eve_type.name }}">{% endif %}</div>
    <div id="low3" style="position:absolute; left:349px; top:213px; width:32px; height:32px;">{% if assets_grouped.LoSlot2 %}<img src="{{ assets_grouped.LoSlot2.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot2.eve_type.name }}">{% endif %}</div>
    <div id="low4" style="position:absolute; left:340px; top:246px; width:32px; height:32px;">{% if assets_grouped.LoSlot3 %}<img src="{{ assets_grouped.LoSlot3.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot3.eve_type.name }}">{% endif %}</div>
    <div id="low5" style="position:absolute; left:323px; top:277px; width:32px; height:32px;">{% if assets_grouped.LoSlot4 %}<img src="{{ assets_grouped.LoSlot4.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot4.eve_type.name }}">{% endif %}</div>
    <div id="low6" style="position:absolute; left:300px; top:304px; width:32px; height:32px;">{% if assets_grouped.LoSlot5 %}<img src="{{ assets_grouped.LoSlot5.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot5.eve_type.name }}">{% endif %}</div>
    <div id="low7" style="position:absolute; left:268px; top:324px; width:32px; height:32px;">{% if assets_grouped.LoSlot6 %}<img src="{{ assets_grouped.LoSlot6.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot6.eve_type.name }}">{% endif %}</div>
    <div id="low8" style="position:absolute; left:234px; top:338px; width:32px; height:32px;">{% if assets_grouped.LoSlot7 %}<img src="{{ assets_grouped.LoSlot7.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.LoSlot7.eve_type.name }}">{% endif %}</div>

    <div id="rigxx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
        <img src="{{ slots.rig }}" alt="" style="border:0px;" />
    </div>
    <div id="rig1" style="position:absolute; left:148px; top:259px; width:32px; height:32px;">{% if assets_grouped.RigSlot0 %}<img src="{{ assets_grouped.RigSlot0.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.RigSlot0.eve_type.name }}">{% endif %}</div>
    <div id="rig2" style="position:absolute; left:185px; top:267px; width:32px; height:32px;">{% if assets_grouped.RigSlot1 %}<img src="{{ assets_grouped.RigSlot1.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.RigSlot1.eve_type.name }}">{% endif %}</div>
    <div id="rig3" style="position:absolute; left:221px; top:259px; width:32px; height:32px;">{% if assets_grouped.RigSlot2 %}<img src="{{ assets_grouped.RigSlot2.eve_type_id|type_icon_url:128 }}" style="height: 32px; width: 32px;" title="{{ assets_grouped.RigSlot2.eve_type.name }}">{% endif %}</div>
    <div id="bigship" style='position:absolute; left:72px; top:71px; width:256px; height:256px; z-index:-2;'>
        <img class="img-rounded" src="{{ structure.eve_type_id|type_render_url:256 }}" style="height: 256px; width: 256px;">
    </div>
</div>
