{% extends "_collapsible_box.html" %}
{% load i18n %}
{% load static %}
{% block collapsible_box_icon %}
    link
{% endblock collapsible_box_icon %}
{% block collapsible_box_title %}
    {% translate "Broken Links" %}
{% endblock collapsible_box_title %}
{% block collapsible_box_content %}
    <div class="flex flex-wrap justify-between gap-2">
        <p class="py-3">
            {% translate "The list below shows all detected errors related to links." %}
        </p>
        <a href="{% url 'linkcheck_landing' region_slug=request.region.slug %}"
           class="btn">{% translate "Details" %}</a>
    </div>
    <div class="mt-4">
        <div id="stats-network-error" class="text-red-500 px-4 hidden">
            <i icon-name="alert-triangle"></i> {% translate "A network error has occurred." %} {% translate "Please try again later." %}
        </div>
        <div id="stats-server-error" class="text-red-500 px-4 hidden">
            <i icon-name="alert-triangle"></i> {% translate "A server error has occurred." %} {% translate "Please contact the administrator." %}
        </div>
        <div id="stats-loading" class="px-4 hidden">
            <i icon-name="loader" class="animate-spin"></i> {% translate "Loading..." %}
        </div>
        <table id="linkcheck-stats"
               data-linkcheck-stats-url="{% url 'linkcheck_stats' region_slug=request.region.slug %}"
               class="w-full max-w-xl mb-4 hidden">
            <tbody>
                <tr>
                    <td>
                        {% translate "Invalid links" %}
                    </td>
                    <td id="number_invalid_urls" class="text-right">
                    </td>
                </tr>
                <tr>
                    <td>
                        {% translate "Valid links" %}
                    </td>
                    <td id="number_valid_urls" class="text-right">
                    </td>
                </tr>
                <tr>
                    <td>
                        {% translate "Ignored links" %}
                    </td>
                    <td id="number_ignored_urls" class="text-right">
                    </td>
                </tr>
                <tr>
                    <td class="pb-2 border-b border-gray-400">
                        {% translate "Unchecked links" %}
                    </td>
                    <td id="number_unchecked_urls"
                        class="text-right border-b border-gray-400">
                    </td>
                </tr>
                <tr>
                    <td class="pt-2">
                        {% translate "Total links" %}
                    </td>
                    <td id="number_all_urls" class="text-right">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
{% endblock collapsible_box_content %}
