{% load filters %}
{% load evelinks %}
{% load i18n %}

<div class="card card-default mb-3">
    <div class="card-header">
        <div class="card-title mb-0">
            {% translate "Fitting Details" %}

            <div class="float-end">
                <a href="{% url 'fittings:save_fit' fit.pk %}" class="btn btn-sm btn-success">
                    {% translate "Save to EVE" %}
                </a>

                <button
                    class='btn btn-sm btn-success'
                    id="buyAllButton"
                    data-clipboard-text="{{ fit.multibuy }}"
                >
                    {% translate "Copy Buy All" %}
                </button>

                <span data-toggle="modal" data-target="#eftModal">
                    <button
                        class='btn btn-sm btn-success'
                        id="copyEftButton"
                        data-bs-toggle="modal"
                        data-bs-target="#eftModal"
                        data-bs-tooltip="aa-fittings"
                        title="{% translate 'Copy Fit (EFT)' %}"
                    >
                        {% translate "Copy Fit (EFT)" %}
                    </button>
                </span>
            </div>
        </div>
    </div>

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

                <li class="list-group-item">
                    <img
                        class="rounded"
                        src="{{ fit.ship_type_type_id|type_render_url:32 }}"
                        title="{{ fit.ship_type.name }}"
                        alt="{{ fit.ship_type.name }}"
                    >
                    {{ fit.ship_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="rounded"
                            src="{{ fitting.SubSystemSlot0.type_id|type_icon_url:32 }}"
                            title="{{ fitting.SubSystemSlot0.type_fk.name }}"
                            alt="{{ fitting.SubSystemSlot0.type_fk.name }}"
                        >
                        {{ fitting.SubSystemSlot0.type_fk.name }}
                    </li>

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

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

                    <li class="list-group-item">
                        <img
                            class="rounded"
                            src="{{ fitting.SubSystemSlot3.type_id|type_icon_url:32 }}"
                            title="{{ fitting.SubSystemSlot3.type_fk.name }}"
                            alt="{{ fitting.SubSystemSlot3.type_fk.name }}"
                        >
                        {{ fitting.SubSystemSlot3.type_fk.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="rounded"
                            src="{{ fitting.HiSlot0.type_id|type_icon_url:32 }}"
                            title="{{ fitting.HiSlot0.type_fk.name }}"
                            alt="{{ fitting.HiSlot0.type_fk.name }}"
                        >
                        {{ fitting.HiSlot0.type_fk.name }}
                    </li>
                {% endif %}

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

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

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

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

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

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

                {% if fitting.HiSlot7 %}
                    <li class="list-group-item">
                        <img
                            class="rounded"
                            src="{{ fitting.HiSlot7.type_id|type_icon_url:32 }}"
                            title="{{ fitting.HiSlot7.type_fk.name }}"
                            alt="{{ fitting.HiSlot7.type_fk.name }}"
                        >
                        {{ fitting.HiSlot7.type_fk.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="rounded"
                            src="{{ fitting.MedSlot0.type_id|type_icon_url:32 }}"
                            title="{{ fitting.MedSlot0.type_fk.name }}"
                            alt="{{ fitting.MedSlot0.type_fk.name }}"
                        >
                        {{ fitting.MedSlot0.type_fk.name }}
                    </li>
                {% endif %}

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

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

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

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

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

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

                {% if fitting.MedSlot7 %}
                    <li class="list-group-item">
                        <img
                            class="rounded"
                            src="{{ fitting.MedSlot7.type_id|type_icon_url:32 }}"
                            title="{{ fitting.MedSlot7.type_fk.name }}"
                            alt="{{ fitting.MedSlot7.type_fk.name }}"
                        >
                        {{ fitting.MedSlot7.type_fk.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="rounded"
                            src="{{ fitting.LoSlot0.type_id|type_icon_url:32 }}"
                            title="{{ fitting.LoSlot0.type_fk.name }}"
                            alt="{{ fitting.LoSlot0.type_fk.name }}"
                        >
                        {{ fitting.LoSlot0.type_fk.name }}
                    </li>
                {% endif %}

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

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

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

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

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

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

                {% if fitting.LoSlot7 %}
                    <li class="list-group-item">
                        <img
                            class="rounded"
                            src="{{ fitting.LoSlot7.type_id|type_icon_url:32 }}"
                            title="{{ fitting.LoSlot7.type_fk.name }}"
                            alt="{{ fitting.LoSlot7.type_fk.name }}"
                        >
                        {{ fitting.LoSlot7.type_fk.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="rounded"
                            src="{{ fitting.RigSlot0.type_id|type_icon_url:32 }}"
                            title="{{ fitting.RigSlot0.type_fk.name }}"
                            alt="{{ fitting.RigSlot0.type_fk.name }}"
                        >
                        {{ fitting.RigSlot0.type_fk.name }}
                    </li>
                {% endif %}

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

                {% if fitting.RigSlot2 %}
                    <li class="list-group-item">
                        <img
                            class="rounded"
                            src="{{ fitting.RigSlot2.type_id|type_icon_url:32 }}"
                            title="{{ fitting.RigSlot2.type_fk.name }}"
                            alt="{{ fitting.RigSlot2.type_fk.name }}"
                        >
                        {{ fitting.RigSlot2.type_fk.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="rounded"
                                src="{{ fitting.ServiceSlot0.type_id|type_icon_url:32 }}"
                                title="{{ fitting.ServiceSlot0.type_fk.name }}"
                                alt="{{ fitting.ServiceSlot0.type_fk.name }}"
                            >
                            {{ fitting.ServiceSlot0.type_fk.name }}
                        </li>
                    {% endif %}

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

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

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

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

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

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

                    {% if fitting.ServiceSlot7 %}
                        <li class="list-group-item">
                            <img
                                class="rounded"
                                src="{{ fitting.ServiceSlot7.type_id|type_icon_url:32 }}"
                                title="{{ fitting.ServiceSlot7.type_fk.name }}"
                                alt="{{ fitting.ServiceSlot7.type_fk.name }}"
                            >
                            {{ fitting.ServiceSlot7.type_fk.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="rounded"
                                src="{{ fitting.FighterTube0.type_id|type_icon_url:32 }}"
                                title="{{ fitting.FighterTube0.type_fk.name }}"
                                alt="{{ fitting.FighterTube0.type_fk.name }}"
                            >
                            {{ fitting.FighterTube0.type_fk.name }}
                        </li>
                    {% endif %}

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

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

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

                    {% if fitting.FighterTube4 %}
                        <li class="list-group-item">
                            <img
                                class="rounded"
                                src="{{ fitting.FighterTube4.type_id|type_icon_url:32 }}"
                                title="{{ fitting.FighterTube4.type_fk.name }}"
                                alt="{{ fitting.FighterTube4.type_fk.name }}"
                            >
                            {{ fitting.FighterTube4.type_fk.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="rounded"
                            src="{{ ammo.type_id|type_icon_url:32 }}"
                            title="{{ ammo.type_fk.name }}"
                            alt="{{ ammo.type_fk.name }}"
                        >
                        {{ ammo.type_fk.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="rounded"
                            src="{{ drone.type_id|type_icon_url:32 }}"
                            title="{{ drone.type_fk.name }}"
                            alt="{{ drone.type_fk.name }}"
                        >
                        {{ drone.type_fk.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="rounded"
                            src="{{ fighter.type_id|type_icon_url:32 }}"
                            title="{{ fighter.type_fk.name }}"
                            alt="{{ fighter.type_fk.name }}"
                        >
                        {{ fighter.type_fk.name }} x{{ fighter.quantity }}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>