{% 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">
                    <textarea 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="col-md-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                {% 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 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>
                    {% if fit.created %}
                    <dt>{% translate "Created" %}</dt>
                    <dd>{{ fit.created|date:'d M Y H:i:s' }}</dd>
                    {% endif %}
                    {% if fit.last_updated %}
                        <dt>{% translate "Last Updated" %}</dt>
                        <dd>{{ fit.last_updated|date:'d M Y H:i:s' }}</dd>
                    {% endif %}
                </dl>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-heading"> {% translate "Fittings" %} </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: 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 'fittings/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="/static/fittings/img/pannel/{{ slots.high }}h.png" alt="" style="border:0px;" />
                            </div>
                            <div id="high1" style="position:absolute; left:73px; top:60px; width:32px; height:32px;">{% if fitting.HiSlot0 %}<img src="{{ fitting.HiSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot0.item_name }}">{% endif %}</div>
                            <div id="high2" style="position:absolute; left:102px; top:42px; width:32px; height:32px;">{% if fitting.HiSlot1 %}<img src="{{ fitting.HiSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot1.item_name }}">{% endif %}</div>
                            <div id="high3" style="position:absolute; left:134px; top:27px; width:32px; height:32px;">{% if fitting.HiSlot2 %}<img src="{{ fitting.HiSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot2.item_name }}">{% endif %}</div>
                            <div id="high4" style="position:absolute; left:169px; top:21px; width:32px; height:32px;">{% if fitting.HiSlot3 %}<img src="{{ fitting.HiSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot3.item_name }}">{% endif %}</div>
                            <div id="high5" style="position:absolute; left:203px; top:22px; width:32px; height:32px;">{% if fitting.HiSlot4 %}<img src="{{ fitting.HiSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot4.item_name }}">{% endif %}</div>
                            <div id="high6" style="position:absolute; left:238px; top:30px; width:32px; height:32px;">{% if fitting.HiSlot5 %}<img src="{{ fitting.HiSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot5.item_name }}">{% endif %}</div>
                            <div id="high7" style="position:absolute; left:270px; top:45px; width:32px; height:32px;">{% if fitting.HiSlot6 %}<img src="{{ fitting.HiSlot6.type_id|type_icon_url:32 }}" title="{{ 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 }}">{% endif %}</div>

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

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

                            <div id="rigxx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
                                <img src="/static/fittings/img/pannel/{{ slots.rig }}r.png" alt="" style="border:0px;" />
                            </div>
                            <div id="rig1" style="position:absolute; left:148px; top:259px; width:32px; height:32px;">{% if fitting.RigSlot0 %}<img src="{{ fitting.RigSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot0.item_name }}">{% endif %}</div>
                            <div id="rig2" style="position:absolute; left:185px; top:267px; width:32px; height:32px;">{% if fitting.RigSlot1 %}<img src="{{ fitting.RigSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot1.item_name }}">{% endif %}</div>
                            <div id="rig3" style="position:absolute; left:221px; top:259px; width:32px; height:32px;">{% if fitting.RigSlot2 %}<img src="{{ fitting.RigSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot2.item_name }}">{% endif %}</div>
                            {% if slots.sub %}
                                <div id="subx" style="position:absolute; left: 0px; top: 0px; width: 398px; height: 398px; z-index:-1;">
                                    <img src="/static/fittings/img/pannel/{{ slots.sub }}s.png" alt="" style="border:0px;" />
                                </div>
                                <div id="sub1" style="position:absolute; left:117px; top:131px; width:32px; height:32px;">{% if fitting.SubSystemSlot0 %}<img src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot0.item_name }}">{% endif %}</div>
                                <div id="sub2" style="position:absolute; left:147px; top:108px; width:32px; height:32px;">{% if fitting.SubSystemSlot1 %}<img src="{{ fitting.SubSystemSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot1.item_name }}">{% endif %}</div>
                                <div id="sub3" style="position:absolute; left:184px; top:98px; width:32px; height:32px;">{% if fitting.SubSystemSlot2 %}<img src="{{ fitting.SubSystemSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot2.item_name }}">{% endif %}</div>
                                <div id="sub4" style="position:absolute; left:221px; top:107px; width:32px; height:32px;">{% if fitting.SubSystemSlot3 %}<img src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}" title="{{ 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;">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <div class="col-sm-12 col-md-12 text-center" style="margin-bottom: 5px;">
                            <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="col-sm-12 col-md-12">
                            <div class="panel panel-warning">
                                <div class="panel-heading text-center">
                                    {% translate "Hull" %}
                                </div>
                                <div class="panel-body text-center">
                                    {{ fit.ship_type.type_name }}
                                </div>
                                <div class="panel-heading text-center">
                                    {% translate "Fitting Notes" %}
                                </div>
                                <div class="panel-body">
                                    <div class="well">
                                        <p style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">{{ fit.description|break_html_lines|striptags|urlize }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="panel-heading">
              <h4 class="panel-title">
                {% translate "Fit" %}
                  <div class="pull-right">
                    <a href="{% url 'fittings:save_fit' fit.pk %}" class="btn btn-xs btn-success" style="margin-top: -2px;">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>
              </h4>
            </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 src="{{ fit.ship_type_type_id|type_render_url:32 }}" title="{{ 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 src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot0.item_name }}"> {{fitting.SubSystemSlot0.item_name}}</li>
                        <li class="list-group-item"><img src="{{ fitting.SubSystemSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot1.item_name }}"> {{fitting.SubSystemSlot1.item_name}}</li>
                        <li class="list-group-item"><img src="{{ fitting.SubSystemSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.SubSystemSlot2.item_name }}"> {{fitting.SubSystemSlot2.item_name}}</li>
                        <li class="list-group-item"><img src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.HiSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot0.item_name }}"> {{fitting.HiSlot0.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot1 %}<li class="list-group-item"><img src="{{ fitting.HiSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot1.item_name }}"> {{fitting.HiSlot1.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot2 %}<li class="list-group-item"><img src="{{ fitting.HiSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot2.item_name }}"> {{fitting.HiSlot2.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot3 %}<li class="list-group-item"><img src="{{ fitting.HiSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot3.item_name }}"> {{fitting.HiSlot3.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot4 %}<li class="list-group-item"><img src="{{ fitting.HiSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot4.item_name }}"> {{fitting.HiSlot4.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot5 %}<li class="list-group-item"><img src="{{ fitting.HiSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot5.item_name }}"> {{fitting.HiSlot5.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot6 %}<li class="list-group-item"><img src="{{ fitting.HiSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.HiSlot6.item_name }}"> {{fitting.HiSlot6.item_name}}</li>{% endif %}
                    {% if fitting.HiSlot7 %}<li class="list-group-item"><img src="{{ fitting.HiSlot7.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.MedSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot0.item_name }}"> {{fitting.MedSlot0.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot1 %}<li class="list-group-item"><img src="{{ fitting.MedSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot1.item_name }}"> {{fitting.MedSlot1.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot2 %}<li class="list-group-item"><img src="{{ fitting.MedSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot2.item_name }}"> {{fitting.MedSlot2.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot3 %}<li class="list-group-item"><img src="{{ fitting.MedSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot3.item_name }}"> {{fitting.MedSlot3.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot4 %}<li class="list-group-item"><img src="{{ fitting.MedSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot4.item_name }}"> {{fitting.MedSlot4.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot5 %}<li class="list-group-item"><img src="{{ fitting.MedSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot5.item_name }}"> {{fitting.MedSlot5.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot6 %}<li class="list-group-item"><img src="{{ fitting.MedSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.MedSlot6.item_name }}"> {{fitting.MedSlot6.item_name}}</li>{% endif %}
                    {% if fitting.MedSlot7 %}<li class="list-group-item"><img src="{{ fitting.MedSlot7.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.LoSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot0.item_name }}"> {{fitting.LoSlot0.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot1 %}<li class="list-group-item"><img src="{{ fitting.LoSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot1.item_name }}"> {{fitting.LoSlot1.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot2 %}<li class="list-group-item"><img src="{{ fitting.LoSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot2.item_name }}"> {{fitting.LoSlot2.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot3 %}<li class="list-group-item"><img src="{{ fitting.LoSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot3.item_name }}"> {{fitting.LoSlot3.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot4 %}<li class="list-group-item"><img src="{{ fitting.LoSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot4.item_name }}"> {{fitting.LoSlot4.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot5 %}<li class="list-group-item"><img src="{{ fitting.LoSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot5.item_name }}"> {{fitting.LoSlot5.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot6 %}<li class="list-group-item"><img src="{{ fitting.LoSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.LoSlot6.item_name }}"> {{fitting.LoSlot6.item_name}}</li>{% endif %}
                    {% if fitting.LoSlot7 %}<li class="list-group-item"><img src="{{ fitting.LoSlot7.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.RigSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot0.item_name }}"> {{fitting.RigSlot0.item_name}}</li>{% endif %}
                    {% if fitting.RigSlot1 %}<li class="list-group-item"><img src="{{ fitting.RigSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.RigSlot1.item_name }}"> {{fitting.RigSlot1.item_name}}</li>{% endif %}
                    {% if fitting.RigSlot2 %}<li class="list-group-item"><img src="{{ fitting.RigSlot2.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.ServiceSlot0.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot0.item_name }}"> {{fitting.ServiceSlot0.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot1 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot1.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot1.item_name }}"> {{fitting.ServiceSlot1.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot2 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot2.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot2.item_name }}"> {{fitting.ServiceSlot2.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot3 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot3.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot3.item_name }}"> {{fitting.ServiceSlot3.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot4 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot4.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot4.item_name }}"> {{fitting.ServiceSlot4.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot5 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot5.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot5.item_name }}"> {{fitting.ServiceSlot5.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot6 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot6.type_id|type_icon_url:32 }}" title="{{ fitting.ServiceSlot6.item_name }}"> {{fitting.ServiceSlot6.item_name}}</li>{% endif %}
                        {% if fitting.ServiceSlot7 %}<li class="list-group-item"><img src="{{ fitting.ServiceSlot7.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fitting.FighterTube0.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube0.item_name }}">{{fitting.FighterTube0.item_name}}</li>{% endif %}
                        {% if fitting.FighterTube1 %}<li class="list-group-item"><img src="{{ fitting.FighterTube1.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube1.item_name }}">{{fitting.FighterTube1.item_name}}</li>{% endif %}
                        {% if fitting.FighterTube2 %}<li class="list-group-item"><img src="{{ fitting.FighterTube2.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube2.item_name }}">{{fitting.FighterTube2.item_name}}</li>{% endif %}
                        {% if fitting.FighterTube3 %}<li class="list-group-item"><img src="{{ fitting.FighterTube3.type_id|type_icon_url:32 }}" title="{{ fitting.FighterTube3.item_name }}">{{fitting.FighterTube3.item_name}}</li>{% endif %}
                        {% if fitting.FighterTube4 %}<li class="list-group-item"><img src="{{ fitting.FighterTube4.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ ammo.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ drone.type_id|type_icon_url:32 }}" title="{{ 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 src="{{ fighter.type_id|type_icon_url:32 }}" title="{{ fighter.item_name }}"> {{fighter.item_name}} x{{fighter.quantity}}</li>
                    {% endfor %}
                </ul>
              </div>
            </div>
          </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script>
        var clipboard = new ClipboardJS('#buyAllButton');
    </script>
{% endblock %}

{% block extra_script %}
     $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
     });
{% endblock %}
