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

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

{% block more_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock %}

{% block page_title %}{% translate "View Category" %}{% endblock %}

{% block fittings_block %}
    <div class="card card-default mb-3">
        <div class="card-header">
            <div class="card-title mb-0">
                {% translate "Category" %}

                {% if perms.fittings.manage %}
                    <div class="float-end" style="margin-top: -2px !important;">
                        <a
                            href="{% url 'fittings:edit_category' cat.pk %}"
                            type="button"
                            class="btn btn-sm btn-warning"
                            data-bs-tooltip="aa-fittings"
                            title="{% translate 'Edit Category' %}"
                        >
                            <span class="fa-solid fa-pencil-alt"></span>
                        </a>

                        <a
                            href="{% url 'fittings:delete_category' cat.pk %}"
                            type="button"
                            class="btn btn-sm btn-danger"
                            data-bs-tooltip="aa-fittings"
                            title="{% translate 'Delete Category' %}"
                        >
                            <span class="fa-solid fa-times"></span>
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="card-body">
            <div class="mb-3">
                <div>
                    <strong>{% translate "Name" %}: </strong>

                    <span class="badge text-white" style="background-color: {{ cat.color }};">
                        {{cat.name}}
                    </span>
                </div>

                {% if perms.fittings.manage %}
                    <div>
                        <strong>{% translate "Groups" %}: </strong>

                        {% if cat.groups.all|length != 0 %}
                            {% for group in cat.groups.all %}
                                <span class="badge bg-primary">{{group.name}}</span>
                            {% endfor %}
                        {% else %}
                            <span class="badge bg-warning">{% translate "Category is public" %}</span>
                        {% endif %}
                    </div>
                {% endif %}
        </div>

        <ul class="nav nav-tabs" style="margin-bottom: 10px;">
            <li class="nav-item" role="presentation">
                <a
                    class="nav-link active"
                    id="doctrines"
                    data-bs-toggle="tab"
                    href="#tab-doctrines"
                    role="tab"
                    aria-controls="tab-doctrines"
                    aria-selected="true"
                >
                    {% translate "Doctrines" %}
                </a>
            </li>

            <li class="nav-item" role="presentation">
                <a
                    class="nav-link"
                    id="fittings"
                    data-bs-toggle="tab"
                    href="#tab-fittings"
                    role="tab"
                    aria-controls="tab-fittings"
                    aria-selected="true"
                >
                    {% translate "Fittings" %}
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="tab-doctrines" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-doctrines">
                {% include "fittings/partials/doctrine-list-table.html" %}
            </div>

            <div id="tab-fittings" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-fittings">
                {% include "fittings/partials/fittings-list-table.html" %}
            </div>
        </div>
    </div>
{% endblock %}

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

    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

    <script>
        $(document).ready(() => {
            {% if docs %}
                $('#docTable').DataTable({
                    language: {
                        url: '{{ DT_LANG_PATH }}'
                    },
                    "order": [[ 0, "asc" ]],
                });
            {% endif %}

            {% if fits %}
                $('#fitTable').DataTable({
                    language: {
                        url: '{{ DT_LANG_PATH }}'
                    },
                });
            {% endif %}

            $('[data-bs-tooltip="aa-fittings"]').tooltip();
        });
    </script>
{% endblock %}
