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

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

    <div class="card-body">
        <div class="row">
            <div class="col-sm-12 col-md-6 text-center">
                <div id="fitting-panel" class="position-relative">
                    <div id="mask" class="position-absolute top-0 start-0">
                        <img
                            class="rounded position-absolute border-0 top-0 start-0"
                            src="{% static 'fittings/img/pannel/tyrannis.png' %}"
                            alt=""
                        >
                    </div>

                    {% include "fittings/partials/view-fit/fitting-panel/hi-slots.html" %}
                    {% include "fittings/partials/view-fit/fitting-panel/mid-slots.html" %}
                    {% include "fittings/partials/view-fit/fitting-panel/low-slots.html" %}
                    {% include "fittings/partials/view-fit/fitting-panel/rig-slots.html" %}
                    {% include "fittings/partials/view-fit/fitting-panel/sub-system-slots.html" %}

                    <div id="bigship" class="position-absolute">
                        <img
                            class="rounded"
                            src="{{ fit.ship_type_type_id|type_render_url:256 }}"
                            title="{{ fit.ship_type.name }}"
                            alt="{{ fit.ship_type.name }}"
                            data-bs-tooltip="aa-fittings"
                        >
                    </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="badge text-white" style="background-color: {{ cat.color }};">
                            <a href="{% url 'fittings:view_category' cat.pk %}" class="nostyle">
                                {{ cat.name }}
                            </a>
                        </span>
                    {% endfor %}
                </div>

                <div class="card card-warning mb-3">
                    <div class="card-header">
                        <div class="card-title mb-0">{% translate "Hull" %}</div>
                    </div>

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

                {% if fit.description %}
                    <div class="card card-warning mb-3">
                        <div class="card-header">
                            <div class="card-title mb-0">{% translate "Fitting Notes" %}</div>
                        </div>

                        <div class="card-body">
                            {{ fit.description|linebreaks|urlize }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>