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

{% if not fits %}
    <div class="alert alert-warning text-center">{% translate "No Fittings Found" %}</div>
{% else %}
    <table class="table table-striped table-hover" id="fitTable">
        <thead>
            <tr>
                <th>{% translate "Name" %}</th>
                <th>{% translate "Ship Type" %}</th>
                <th>{% translate "Categories" %}</th>
                <th>{% translate "Description" %}</th>
            </tr>
        </thead>

        <tbody>
            {% for fit in fits %}
                <tr>
                    <td>
                        <a class="text-decoration-none" href="{% url 'fittings:view_fit' fit.pk %}">
                            <span class="d-block" style="min-width: 250px;">
                                <span class="me-2" style="height: 32px; width: 32px;">
                                    <img src="{{ fit.ship_type_type_id|type_render_url:32 }}" class="rounded" height="32" width="32" alt="{{ fit.ship_type.name }}">
                                </span>
                                <span>{{ fit.name }}</span>
                            </span>
                        </a>
                    </td>

                    <td>{{ fit.ship_type.name }}</td>

                    <td>
                        {% for cat in cats|get_item:fit.pk %}
                            <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 %}
                    </td>

                    <td>{{ fit.description|linebreaks|urlize }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}
