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

<div id="tab-corps" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-corps">
    <div class="card-body">
        {% if user_can_see_other_corps %}
            <header class="mb-3">
                <h4>
                    {% translate "Corporations" %}
                    <span class="small text-muted">({% translate "Click on an alliance name to see their corporations" %})</span>
                </h4>
            </header>
        {% endif %}

        <div class="accordion accordion-flush mb-0" id="accordion" id="accordionAlliances">
            {% if perms.afat.stats_corporation_other or perms.afat.manage_afat %}
                {% for key, value in data.items|dictsort:0 %}
                    {% if value|length > 0 %}
                        <div class="accordion-item">
                            <div class="accordion-header clearfix position-relative" id="heading{{ value.0 }}">
                                <span class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ value.0 }}" aria-expanded="false" aria-controls="collapse{{ value.0 }}">
                                    <img class="rounded me-3" src="{{ value.0|alliance_logo_url:32 }}" alt="{{ key }}">

                                    <span class="d-block" style="width: calc(100% - 110px);">
                                        {{ key }}
                                    </span>
                                </span>

                                {% if key != 'No Alliance' %}
                                    <a
                                        class="btn btn-primary btn-sm position-absolute btn-alliance-statistics"
                                        href="{% url 'afat:statistics_alliance' value.0 year %}"
                                        data-bs-toggle="tooltip"
                                        data-bs-html="true"
                                        data-bs-title="{% translate 'Alliance statistics for' %}:<br>{{ key }}"
                                        style="top: 17px; right: 50px; z-index: 999;"
                                    >
                                        <i class="fa-solid fa-eye" style="color: rgb(255 255 255);"></i>
                                    </a>
                                {% endif %}
                            </div>

                            <div id="collapse{{ value.0 }}" class="accordion-collapse collapse" aria-labelledby="heading{{ value.0 }}" data-bs-parent="#accordionAlliances">
                                <div class="accordion-body">
                                    <table class="table table-striped table-hover mb-0">
                                        <tbody>
                                            {% for corp in value %}
                                                {% if not forloop.first %}
                                                    <tr>
                                                        <td>
                                                            <img class="rounded me-3" src="{{ corp.0|corporation_logo_url:32 }}" alt="{{ corp.1 }}">
                                                            {{ corp.1 }}
                                                        </td>

                                                        <td class="text-end">
                                                            <a
                                                                class="btn btn-primary btn-sm"
                                                                href="{% url 'afat:statistics_corporation' corp.0 year %}"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-html="true"
                                                                data-bs-title="{% translate 'Corporation statistics for' %}:<br>{{ corp.1 }}"
                                                            >
                                                                <i class="fa-solid fa-eye"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                {% endif %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}

{#                    <script>#}
{#                        $(document).ready(() => {#}
{#                            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');#}
{#                            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));#}
{#                        });#}
{#                    </script>#}
            {% elif perms.afat.stats_corporation_own %}
                <table class="table table-striped table-hover mb-0">
                    <tbody>
                        <tr>
                            <td>
                                <img class="rounded me-1" src="{{ data.0.0|corporation_logo_url:32 }}" alt="{{ data.0.1 }}">
                                {{ data.0.1 }}
                            </td>

                            <td class="text-end">
                                <a class="btn btn-primary btn-sm" href="{% url 'afat:statistics_corporation' data.0.0 year %}">
                                    <i class="fa-solid fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            {% endif %}
        </div>
    </div>
</div>
