{% extends 'fittings/base.html' %}

{% load i18n %}
{% load humanize %}
{% load filters %}
{% load static %}
{% load evelinks %}

{% block page_title %}{{ fitting.name }} {% translate "Fit" %}{% endblock %}

{% block fittings_block %}
    {# modal start #}
    <div class="modal fade" id="deleteModal" role="dialog" tabindex="-1" aria-labelledby="modalTitle">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <h4 class="modal-title" id="modalTitle">{% translate "Are you sure?" %}</h4>
                </div>

                <div class="modal-body">
                    <p style="white-space: pre-line;">
                        {% translate "Are you sure you wish to delete this fit?" %}

                        <i><strong>{% translate "This action is permanent." %}</strong></i>
                    </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {% translate "No - Close" %}
                    </button>

                    <a href="{% url 'fittings:delete_fit' fit.pk %}" type="button" class="btn btn-danger">
                        {% translate "Yes - Delete" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="eftModal" role="dialog" tabindex="-1" aria-labelledby="modalTitle">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <h4 class="modal-title" id="modalTitle">{{ fit.name }}</h4>
                </div>

                <div class="modal-body">
                    <label for="eft-fitting">
                        <p>{% translate "EFT Formatted Fitting" %}</p>
                    </label>
                    <textarea id="eft-fitting" style="width: 100%; height: 100%;" rows="25" onclick="this.select()">{{ fit.eft }}</textarea>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {% translate "Close" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {# modal end #}

    <br />
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        {% translate "Fit Information" %}

                        {% if perms.fittings.manage %}
                            <span data-toggle="modal" data-target="#deleteModal">
                                <button class="btn btn-xs btn-danger" style="float: right; margin-left: 5px;" data-toggle="tooltip" data-placement="top" title="{% translate 'Delete Fit' %}">
                                    <span class="fa fas fa-times"></span>
                                </button>
                            </span>

                            <a href="{% url 'fittings:edit_fit' fit.pk %}" class="btn btn-xs btn-warning" style="float: right; margin-left: 5px;" data-toggle="tooltip" data-placement="top" title="{% translate 'Edit/Update Fit' %}">
                                <span class="fa fas fa-pencil-alt"></span>
                            </a>
                        {% endif %}
                    </div>
                </div>

                <div class="panel-body">
                    <dl>
                        <dt>{% translate "Doctrines" %} </dt>
                        <dd>
                            <ul>
                                {% for doctrine in doctrines %}
                                    <li>
                                        <a href="{% url 'fittings:view_doctrine' doctrine.pk %}">
                                            {{ doctrine.name }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">{% translate "Fitting" %}</div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-6 text-center">
                            <div id="Fitting_Panel" style="position: relative; height: 398px; width: 398px; z-index: 3; margin: 0 auto;" >
                                <div id="mask" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index: -1;">
                                    <img class="img-rounded" style="position:absolute; left: 0; top: 0; height: 398px; width: 398px; border: 0;" src="{% static 'fittings/img/pannel/tyrannis.png' %}" alt="">
                                </div>

                                <div id="highx" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index: -1;">
                                    <img class="img-rounded" src="/static/fittings/img/pannel/{{ slots.high }}h.png" alt="" style="border: 0;">
                                </div>

                                <div id="high1" style="position:absolute; left:73px; top:60px; width:32px; height:32px;">
                                    {% if fitting.HiSlot0 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot0.item_name }}" alt="{{ fitting.HiSlot0.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high2" style="position:absolute; left:102px; top:42px; width:32px; height:32px;">
                                    {% if fitting.HiSlot1 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot1.item_name }}" alt="{{ fitting.HiSlot1.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high3" style="position:absolute; left:134px; top:27px; width:32px; height:32px;">
                                    {% if fitting.HiSlot2 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot2.item_name }}" alt="{{ fitting.HiSlot2.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high4" style="position:absolute; left:169px; top:21px; width:32px; height:32px;">
                                    {% if fitting.HiSlot3 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot3.item_name }}" alt="{{ fitting.HiSlot3.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high5" style="position:absolute; left:203px; top:22px; width:32px; height:32px;">
                                    {% if fitting.HiSlot4 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot4.item_name }}" alt="{{ fitting.HiSlot4.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high6" style="position:absolute; left:238px; top:30px; width:32px; height:32px;">
                                    {% if fitting.HiSlot5 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot5.item_name }}" alt="{{ fitting.HiSlot5.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high7" style="position:absolute; left:270px; top:45px; width:32px; height:32px;">
                                    {% if fitting.HiSlot6 %}
                                        <img class="img-rounded" src="{{ fitting.HiSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot6.item_name }}" alt="{{ fitting.HiSlot6.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="high8" style="position:absolute; left:295px; top:64px; width:32px; height:32px;">{% if fitting.HiSlot7 %}<img src="{{ fitting.HiSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot7.item_name }}" alt="{{ fitting.HiSlot7.item_name }}">{% endif %}</div>

                                <div id="midx" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index: -1;">
                                    <img class="img-rounded" src="/static/fittings/img/pannel/{{ slots.med }}m.png" alt="" style="border: 0;" />
                                </div>

                                <div id="mid1" style="position:absolute; left:26px; top:140px; width:32px; height:32px;">
                                    {% if fitting.MedSlot0 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot0.item_name }}" alt="{{ fitting.MedSlot0.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid2" style="position:absolute; left:24px; top:176px; width:32px; height:32px;">
                                    {% if fitting.MedSlot1 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot1.item_name }}" alt="{{ fitting.MedSlot1.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid3" style="position:absolute; left:23px; top:212px; width:32px; height:32px;">
                                    {% if fitting.MedSlot2 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot2.item_name }}" alt="{{ fitting.MedSlot2.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid4" style="position:absolute; left:30px; top:245px; width:32px; height:32px;">
                                    {% if fitting.MedSlot3 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot3.item_name }}" alt="{{ fitting.MedSlot3.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid5" style="position:absolute; left:46px; top:278px; width:32px; height:32px;">
                                    {% if fitting.MedSlot4 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot4.item_name }}" alt="{{ fitting.MedSlot4.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid6" style="position:absolute; left:69px; top:304px; width:32px; height:32px;">
                                    {% if fitting.MedSlot5 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot5.item_name }}" alt="{{ fitting.MedSlot5.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid7" style="position:absolute; left:100px; top:328px; width:32px; height:32px;">
                                    {% if fitting.MedSlot6 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot6.item_name }}" alt="{{ fitting.MedSlot6.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="mid8" style="position:absolute; left:133px; top:342px; width:32px; height:32px;">
                                    {% if fitting.MedSlot7 %}
                                        <img class="img-rounded" src="{{ fitting.MedSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot7.item_name }}" alt="{{ fitting.MedSlot7.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="lowx" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index:-1;">
                                    <img class="img-rounded" src="/static/fittings/img/pannel/{{ slots.low }}l.png" alt="" style="border: 0;">
                                </div>

                                <div id="low1" style="position:absolute; left:344px; top:143px; width:32px; height:32px;">
                                    {% if fitting.LoSlot0 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot0.item_name }}" alt="{{ fitting.LoSlot0.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low2" style="position:absolute; left:350px; top:178px; width:32px; height:32px;">
                                    {% if fitting.LoSlot1 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot1.item_name }}" alt="{{ fitting.LoSlot1.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low3" style="position:absolute; left:349px; top:213px; width:32px; height:32px;">
                                    {% if fitting.LoSlot2 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot2.item_name }}" alt="{{ fitting.LoSlot2.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low4" style="position:absolute; left:340px; top:246px; width:32px; height:32px;">
                                    {% if fitting.LoSlot3 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot3.item_name }}" alt="{{ fitting.LoSlot3.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low5" style="position:absolute; left:323px; top:277px; width:32px; height:32px;">
                                    {% if fitting.LoSlot4 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot4.item_name }}" alt="{{ fitting.LoSlot4.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low6" style="position:absolute; left:300px; top:304px; width:32px; height:32px;">
                                    {% if fitting.LoSlot5 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot5.item_name }}" alt="{{ fitting.LoSlot5.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low7" style="position:absolute; left:268px; top:324px; width:32px; height:32px;">
                                    {% if fitting.LoSlot6 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot6.item_name }}" alt="{{ fitting.LoSlot6.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="low8" style="position:absolute; left:234px; top:338px; width:32px; height:32px;">
                                    {% if fitting.LoSlot7 %}
                                        <img class="img-rounded" src="{{ fitting.LoSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot7.item_name }}" alt="{{ fitting.LoSlot7.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="rigxx" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index:-1;">
                                    <img class="img-rounded" src="/static/fittings/img/pannel/{{ slots.rig }}r.png" alt="" style="border: 0;">
                                </div>

                                <div id="rig1" style="position:absolute; left:148px; top:259px; width:32px; height:32px;">
                                    {% if fitting.RigSlot0 %}
                                        <img class="img-rounded" src="{{ fitting.RigSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot0.item_name }}" alt="{{ fitting.RigSlot0.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="rig2" style="position:absolute; left:185px; top:267px; width:32px; height:32px;">
                                    {% if fitting.RigSlot1 %}
                                        <img class="img-rounded" src="{{ fitting.RigSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot1.item_name }}" alt="{{ fitting.RigSlot1.item_name }}">
                                    {% endif %}
                                </div>

                                <div id="rig3" style="position:absolute; left:221px; top:259px; width:32px; height:32px;">
                                    {% if fitting.RigSlot2 %}
                                        <img class="img-rounded" src="{{ fitting.RigSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot2.item_name }}" alt="{{ fitting.RigSlot2.item_name }}">
                                    {% endif %}
                                </div>

                                {% if slots.sub %}
                                    <div id="subx" style="position:absolute; left: 0; top: 0; width: 398px; height: 398px; z-index: -1;">
                                        <img class="img-rounded" src="/static/fittings/img/pannel/{{ slots.sub }}s.png" alt="" style="border: 0;">
                                    </div>

                                    <div id="sub1" style="position:absolute; left:117px; top:131px; width:32px; height:32px;">
                                        {% if fitting.SubSystemSlot0 %}
                                            <img class="img-rounded" src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot0.item_name }}" alt="{{ fitting.SubSystemSlot0.item_name }}">
                                        {% endif %}
                                    </div>

                                    <div id="sub2" style="position:absolute; left:147px; top:108px; width:32px; height:32px;">
                                        {% if fitting.SubSystemSlot1 %}
                                            <img class="img-rounded" src="{{ fitting.SubSystemSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot1.item_name }}" alt="{{ fitting.SubSystemSlot1.item_name }}">
                                        {% endif %}
                                    </div>

                                    <div id="sub3" style="position:absolute; left:184px; top:98px; width:32px; height:32px;">
                                        {% if fitting.SubSystemSlot2 %}
                                            <img class="img-rounded" src="{{ fitting.SubSystemSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot2.item_name }}" alt="{{ fitting.SubSystemSlot2.item_name }}">
                                        {% endif %}
                                    </div>

                                    <div id="sub4" style="position:absolute; left:221px; top:107px; width:32px; height:32px;">
                                        {% if fitting.SubSystemSlot3 %}
                                            <img class="img-rounded" src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot3.item_name }}" alt="{{ fitting.SubSystemSlot3.item_name }}">
                                        {% endif %}
                                    </div>
                                {% endif %}

                                <div id="bigship" style='position:absolute; left: 72px; top: 71px; width: 256px; height: 256px; z-index: -2;'>
                                    <img class="img-rounded" src="{{ fit.ship_type_type_id|type_render_url:256 }}" style="height: 256px; width: 256px;" alt="{{ fit.ship_type.type_name }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6">
                            <div class="text-center" style="margin-bottom: 1rem;">
                                <h3>{{ fit.name }}</h3>

                                {% for cat in cats %}
                                    <span class="label" style="background-color: {{ cat.color }};">
                                        <a href="{% url 'fittings:view_category' cat.pk %}" class="nostyle">
                                            {{ cat.name }}
                                        </a>
                                    </span>
                                {% endfor %}
                            </div>

                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <div class="panel-title">{% translate "Hull" %}</div>
                                </div>

                                <div class="panel-body text-center">
                                    {{ fit.ship_type.type_name }}
                                </div>
                            </div>

                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <div class="panel-title">{% translate "Fitting Notes" %}</div>
                                </div>

                                <div class="panel-body">
                                    <div class="well">
                                        {{ fit.description|linebreaks|urlize }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        {% translate "Fitting Details" %}

                        <div class="pull-right">
                            <a href="{% url 'fittings:save_fit' fit.pk %}" class="btn btn-xs btn-success" style="margin-top: -2px;">
                                {% translate "Save to EVE" %}
                            </a>

                            <button class='btn btn-xs btn-success' id="buyAllButton" style="margin-top: -2px;" data-clipboard-text="{{fit.ship_type.type_name}}&#10;{% if fitting.LoSlot0 %}{{fitting.LoSlot0.item_name}}&#10;{% endif %}{% if fitting.LoSlot1 %}{{fitting.LoSlot1.item_name}}&#10;{% endif %}{% if fitting.LoSlot2 %}{{fitting.LoSlot2.item_name}}&#10;{% endif %}{% if fitting.LoSlot3 %}{{fitting.LoSlot3.item_name}}&#10;{% endif %}{% if fitting.LoSlot4 %}{{fitting.LoSlot4.item_name}}&#10;{% endif %}{% if fitting.LoSlot5 %}{{fitting.LoSlot5.item_name}}&#10;{% endif %}{% if fitting.LoSlot6 %}{{fitting.LoSlot6.item_name}}&#10;{% endif %}{% if fitting.LoSlot7 %}{{fitting.LoSlot7.item_name}}&#10;{% endif %}{% if fitting.MedSlot0 %}{{fitting.MedSlot0.item_name}}&#10;{% endif %}{% if fitting.MedSlot1 %}{{fitting.MedSlot1.item_name}}&#10;{% endif %}{% if fitting.MedSlot2 %}{{fitting.MedSlot2.item_name}}&#10;{% endif %}{% if fitting.MedSlot3 %}{{fitting.MedSlot3.item_name}}&#10;{% endif %}{% if fitting.MedSlot4 %}{{fitting.MedSlot4.item_name}}&#10;{% endif %}{% if fitting.MedSlot5 %}{{fitting.MedSlot5.item_name}}&#10;{% endif %}{% if fitting.MedSlot6 %}{{fitting.MedSlot6.item_name}}&#10;{% endif %}{% if fitting.MedSlot7 %}{{fitting.MedSlot7.item_name}}&#10;{% endif %}{% if fitting.HiSlot0 %}{{fitting.HiSlot0.item_name}}&#10;{% endif %}{% if fitting.HiSlot1 %}{{fitting.HiSlot1.item_name}}&#10;{% endif %}{% if fitting.HiSlot2 %}{{fitting.HiSlot2.item_name}}&#10;{% endif %}{% if fitting.HiSlot3 %}{{fitting.HiSlot3.item_name}}&#10;{% endif %}{% if fitting.HiSlot4 %}{{fitting.HiSlot4.item_name}}&#10;{% endif %}{% if fitting.HiSlot5 %}{{fitting.HiSlot5.item_name}}&#10;{% endif %}{% if fitting.HiSlot6 %}{{fitting.HiSlot6.item_name}}&#10;{% endif %}{% if fitting.HiSlot7 %}{{fitting.HiSlot7.item_name}}&#10;{% endif %}{% if fitting.RigSlot0 %}{{fitting.RigSlot0.item_name}}&#10;{% endif %}{% if fitting.RigSlot1 %}{{fitting.RigSlot1.item_name}}&#10;{% endif %}{% if fitting.RigSlot2 %}{{fitting.RigSlot2.item_name}}&#10;{% endif %}{% if fitting.SubSystemSlot0 %}{{fitting.SubSystemSlot0.item_name}}&#10;{% endif %}{% if fitting.SubSystemSlot1 %}{{fitting.SubSystemSlot1.item_name}}&#10;{% endif %}{% if fitting.SubSystemSlot2 %}{{fitting.SubSystemSlot2.item_name}}&#10;{% endif %}{% if fitting.SubSystemSlot3 %}{{fitting.SubSystemSlot3.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot0 %}{{fitting.ServiceSlot0.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot1 %}{{fitting.ServiceSlot1.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot2 %}{{fitting.ServiceSlot2.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot3 %}{{fitting.ServiceSlot3.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot4 %}{{fitting.ServiceSlot4.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot5 %}{{fitting.ServiceSlot5.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot6 %}{{fitting.ServiceSlot6.item_name}}&#10;{% endif %}{% if fitting.ServiceSlot7 %}{{fitting.ServiceSlot7.item_name}}&#10;{% endif %}{% if fitting.FighterTube0 %}{{fitting.FighterTube0.item_name}}&#10;{% endif %}{% if fitting.FighterTube1 %}{{fitting.FighterTube1.item_name}}&#10;{% endif %}{% if fitting.FighterTube2 %}{{fitting.FighterTube2.item_name}}&#10;{% endif %}{% if fitting.FighterTube3 %}{{fitting.FighterTube3.item_name}}&#10;{% endif %}{% if fitting.FighterTube4 %}{{fitting.FighterTube4.item_name}}&#10;{% endif %}{% for ammo in fitting.Cargo %}{{ammo.item_name}} x{{ammo.quantity}}&#10;{% endfor %}{% for fighter in fitting.FighterBay %}{{fighter.item_name}} x{{fighter.quantity}}&#10;{% endfor %}{% for drone in fitting.DroneBay %}{{drone.item_name}} x{{drone.quantity}}&#10;{% endfor %}">
                                {% translate "Copy Buy All" %}
                            </button>

                            <span data-toggle="modal" data-target="#eftModal">
                                <button class='btn btn-xs btn-success' id="copyEftButton" style="margin-top: -2px;" data-toggle="tooltip" data-placement="top" title="{% translate 'Copy Fit (EFT)' %}">{% translate "Copy Fit (EFT)" %}</button>
                            </span>
                        </div>
                    </div>
                </div>

                <div id="fitting">
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-warning">
                                {% translate "Hull" %}
                            </li>

                            <li class="list-group-item">
                                <img class="img-rounded" src="{{ fit.ship_type_type_id|type_render_url:32 }}" title="{{ fit.ship_type.type_name }}" alt="{{ fit.ship_type.type_name }}">
                                {{ fit.ship_type.type_name }}
                            </li>

                            {% if fitting.SubSystemSlot0 %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "SubSystems" %}
                                </li>

                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot0.item_name }}" alt="{{ fitting.SubSystemSlot0.item_name }}">
                                    {{ fitting.SubSystemSlot0.item_name }}
                                </li>

                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.SubSystemSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot1.item_name }}" alt="{{ fitting.SubSystemSlot1.item_name }}">
                                    {{ fitting.SubSystemSlot1.item_name }}
                                </li>

                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.SubSystemSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot2.item_name }}" alt="{{ fitting.SubSystemSlot2.item_name }}">
                                    {{ fitting.SubSystemSlot2.item_name }}
                                </li>

                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot3.item_name }}" alt="{{ fitting.SubSystemSlot3.item_name }}">
                                    {{ fitting.SubSystemSlot3.item_name }}
                                </li>
                            {% endif %}

                            <li class="list-group-item list-group-item-warning">
                                {% translate "High Slots" %}
                            </li>

                            {% if fitting|empty_slots:'HiSlot' %}
                                <li class="list-group-item">
                                    {% translate "No High Slot Items" %}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot0 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot0.item_name }}" alt="{{ fitting.HiSlot0.item_name }}">
                                    {{ fitting.HiSlot0.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot1 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot1.item_name }}" alt="{{ fitting.HiSlot1.item_name }}">
                                    {{ fitting.HiSlot1.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot2 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot2.item_name }}" alt="{{ fitting.HiSlot2.item_name }}">
                                    {{ fitting.HiSlot2.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot3 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot3.item_name }}" alt="{{ fitting.HiSlot3.item_name }}">
                                    {{fitting.HiSlot3.item_name}}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot4 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot4.item_name }}" alt="{{ fitting.HiSlot4.item_name }}">
                                    {{ fitting.HiSlot4.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot5 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot5.item_name }}" alt="{{ fitting.HiSlot5.item_name }}">
                                    {{ fitting.HiSlot5.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot6 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot6.item_name }}" alt="{{ fitting.HiSlot6.item_name }}">
                                    {{ fitting.HiSlot6.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.HiSlot7 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.HiSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot7.item_name }}" alt="{{ fitting.HiSlot7.item_name }}">
                                    {{ fitting.HiSlot7.item_name }}
                                </li>
                            {% endif %}

                            <li class="list-group-item list-group-item-warning">
                                {% translate "Medium Slots" %}
                            </li>

                            {% if fitting|empty_slots:'MedSlot' %}
                                <li class="list-group-item">
                                    {% translate "No Medium Slot Items" %}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot0 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot0.item_name }}" alt="{{ fitting.MedSlot0.item_name }}">
                                    {{ fitting.MedSlot0.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot1 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot1.item_name }}" alt="{{ fitting.MedSlot1.item_name }}">
                                    {{ fitting.MedSlot1.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot2 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot2.item_name }}" alt="{{ fitting.MedSlot2.item_name }}">
                                    {{ fitting.MedSlot2.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot3 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot3.item_name }}" alt="{{ fitting.MedSlot3.item_name }}">
                                    {{ fitting.MedSlot3.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot4 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot4.item_name }}" alt="{{ fitting.MedSlot4.item_name }}">
                                    {{ fitting.MedSlot4.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot5 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot5.item_name }}" alt="{{ fitting.MedSlot5.item_name }}">
                                    {{ fitting.MedSlot5.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot6 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot6.item_name }}" alt="{{ fitting.MedSlot6.item_name }}">
                                    {{ fitting.MedSlot6.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.MedSlot7 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.MedSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot7.item_name }}" alt="{{ fitting.MedSlot7.item_name }}">
                                    {{ fitting.MedSlot7.item_name }}
                                </li>
                            {% endif %}

                            <li class="list-group-item list-group-item-warning">
                                {% translate "Low Slots" %}
                            </li>

                            {% if fitting|empty_slots:'LoSlot' %}
                                <li class="list-group-item">
                                    {% translate "No Low Slot Items" %}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot0 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot0.item_name }}" alt="{{ fitting.LoSlot0.item_name }}">
                                    {{ fitting.LoSlot0.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot1 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot1.item_name }}" alt="{{ fitting.LoSlot1.item_name }}">
                                    {{ fitting.LoSlot1.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot2 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot2.item_name }}" alt="{{ fitting.LoSlot2.item_name }}">
                                    {{ fitting.LoSlot2.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot3 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot3.item_name }}" alt="{{ fitting.LoSlot3.item_name }}">
                                    {{ fitting.LoSlot3.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot4 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot4.item_name }}" alt="{{ fitting.LoSlot4.item_name }}">
                                    {{ fitting.LoSlot4.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot5 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot5.item_name }}" alt="{{ fitting.LoSlot5.item_name }}">
                                    {{ fitting.LoSlot5.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot6 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot6.item_name }}" alt="{{ fitting.LoSlot6.item_name }}">
                                    {{ fitting.LoSlot6.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.LoSlot7 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.LoSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot7.item_name }}" alt="{{ fitting.LoSlot7.item_name }}">
                                    {{ fitting.LoSlot7.item_name }}
                                </li>
                            {% endif %}

                            <li class="list-group-item list-group-item-warning">
                                {% translate "Rig Slots" %}
                            </li>

                            {% if fitting|empty_slots:'RigSlot' %}
                                <li class="list-group-item">
                                    {% translate "No Rig Slot Items" %}
                                </li>
                            {% endif %}

                            {% if fitting.RigSlot0 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.RigSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot0.item_name }}" alt="{{ fitting.RigSlot0.item_name }}">
                                    {{ fitting.RigSlot0.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.RigSlot1 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.RigSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot1.item_name }}" alt="{{ fitting.RigSlot1.item_name }}">
                                    {{ fitting.RigSlot1.item_name }}
                                </li>
                            {% endif %}

                            {% if fitting.RigSlot2 %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fitting.RigSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot2.item_name }}" alt="{{ fitting.RigSlot2.item_name }}">
                                    {{ fitting.RigSlot2.item_name }}
                                </li>
                            {% endif %}

                            {% if not fitting|empty_slots:'ServiceSlot' %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "Service Slots" %}
                                </li>

                                {% if fitting.ServiceSlot0 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot0.item_name }}" alt="{{ fitting.ServiceSlot0.item_name }}">
                                        {{ fitting.ServiceSlot0.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot1 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot1.item_name }}" alt="{{ fitting.ServiceSlot1.item_name }}">
                                        {{ fitting.ServiceSlot1.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot2 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot2.item_name }}" alt="{{ fitting.ServiceSlot2.item_name }}">
                                        {{ fitting.ServiceSlot2.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot3 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot3.item_name }}" alt="{{ fitting.ServiceSlot3.item_name }}">
                                        {{ fitting.ServiceSlot3.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot4 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot4.item_name }}" alt="{{ fitting.ServiceSlot4.item_name }}">
                                        {{ fitting.ServiceSlot4.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot5 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot5.item_name }}" alt="{{ fitting.ServiceSlot5.item_name }}">
                                        {{ fitting.ServiceSlot5.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot6 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot6.item_name }}" alt="{{ fitting.ServiceSlot6.item_name }}">
                                        {{ fitting.ServiceSlot6.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.ServiceSlot7 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.ServiceSlot7.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot7.item_name }}" alt="{{ fitting.ServiceSlot7.item_name }}">
                                        {{ fitting.ServiceSlot7.item_name }}
                                    </li>
                                {% endif %}
                            {% endif %}

                            {% if not fitting|empty_slots:'FighterTube' %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "Fighter Tubes" %}
                                </li>

                                {% if fitting.FighterTube0 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.FighterTube0.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube0.item_name }}" alt="{{ fitting.FighterTube0.item_name }}">
                                        {{ fitting.FighterTube0.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.FighterTube1 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.FighterTube1.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube1.item_name }}" alt="{{ fitting.FighterTube1.item_name }}">
                                        {{ fitting.FighterTube1.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.FighterTube2 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.FighterTube2.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube2.item_name }}" alt="{{ fitting.FighterTube2.item_name }}">
                                        {{ fitting.FighterTube2.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.FighterTube3 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.FighterTube3.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube3.item_name }}" alt="{{ fitting.FighterTube3.item_name }}">
                                        {{ fitting.FighterTube3.item_name }}
                                    </li>
                                {% endif %}

                                {% if fitting.FighterTube4 %}
                                    <li class="list-group-item">
                                        <img class="img-rounded" src="{{ fitting.FighterTube4.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube4.item_name }}" alt="{{ fitting.FighterTube4.item_name }}">
                                        {{ fitting.FighterTube4.item_name }}
                                    </li>
                                {% endif %}
                            {% endif %}

                            {% if fitting.Cargo|length > 0 %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "Cargo Bay" %}
                                </li>
                            {% endif %}

                            {% for ammo in fitting.Cargo %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ ammo.type_id|type_icon_url:32 }}" title="{{ ammo.item_name }}" alt="{{ ammo.item_name }}">
                                    {{ ammo.item_name }} x{{ ammo.quantity }}
                                </li>
                            {% endfor %}

                            {% if fitting.DroneBay|length > 0 %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "Drone Bay" %}
                                </li>
                            {% endif %}

                            {% for drone in fitting.DroneBay %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ drone.type_id|type_icon_url:32 }}" title="{{ drone.item_name }}" alt="{{ drone.item_name }}">
                                    {{ drone.item_name }} x{{ drone.quantity }}
                                </li>
                            {% endfor %}

                            {% if fitting.FighterBay|length > 0 %}
                                <li class="list-group-item list-group-item-warning">
                                    {% translate "Fighter Bay" %}
                                </li>
                            {% endif %}

                            {% for fighter in fitting.FighterBay %}
                                <li class="list-group-item">
                                    <img class="img-rounded" src="{{ fighter.type_id|type_icon_url:32 }}" title="{{ fighter.item_name }}" alt="{{ fighter.item_name }}">
                                    {{ fighter.item_name }} x{{ fighter.quantity }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/clipboard-js.html' %}

    <script>
        let clipboard = new ClipboardJS('#buyAllButton');

        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
{% endblock %}
