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

{% if perms.memberaudit.basic_access %}
    <div id="memberaudit-check-dashboard-widget" class="col-12 mb-3">
        <div class="card">
            <div class="card-body">
                {% translate "Character Checks" as widget_title %}
                {% include "framework/dashboard/widget-title.html" with title=memberaudit_app_name|add:" "|add:widget_title %}

                {% if chars %}
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="text-center"></th>
                                <th class="text-center">{% translate "Name" %}</th>
                                <th class="text-center">{% translate "Information" %}</th>
                                <th class="text-center">{% translate "Status" %}</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for char_id, char_info in chars.items %}
                                <tr>
                                    <td class="text-center">
                                        <img src="{{ char_id|character_portrait_url:32 }}" data-bs-tooltip="aa-memberaudit-dashboard" class="rounded-circle me-2" title="{{ char_info.name }}" alt="{{ char_info.name }}">
                                    </td>
                                    <td class="text-center">{{ char_info.name }}</td>
                                    <td class="text-center">
                                        {{ char_info.issues }}
                                    </td>
                                    <td class="text-center">
                                        {{ char_info.icon }}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <div class="row justify-content-center mt-3">
                        <span class="text-warning text-center">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% blocktranslate %}Some characters are not registered in {{ memberaudit_app_name }}.{% endblocktranslate %}
                        </span>

                        <div class="col-auto mt-3">
                            <a href="{% url 'memberaudit:launcher' %}" class="btn btn-warning">
                                {% blocktranslate %}Go to {{ memberaudit_app_name }}{% endblocktranslate %}
                            </a>
                        </div>
                    </div>
                {% else %}
                    <div class="row justify-content-center mt-3">
                        <span class="text-success text-center">
                            <i class="fas fa-check-circle"></i>
                            {% blocktranslate %}All characters are registered in {{ memberaudit_app_name }}.{% endblocktranslate %}
                        </span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-tooltip="aa-memberaudit-dashboard"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
{% endif %}