{% extends "_collapsible_box.html" %}

{% load i18n %}
{% load static %}


{% block collapsible_box_icon %}
    link
{% endblock %}

{% block collapsible_box_title %}
    {% trans 'Broken Links' %}
{% endblock %}

{% block collapsible_box_content %}
    <div class="flex flex-wrap justify-between gap-2">
        <p class="py-3">{% trans 'The list below shows all detected errors related to links.' %}</p>
        <a href="{% url 'linkcheck_landing' region_slug=request.region.slug %}"
           class="btn">{% trans "Details" %}</a>
    </div>
    <div class="mt-4">
        <div id="stats-network-error" class="text-red-500 px-4 hidden">
            <i data-feather="alert-triangle"></i> {% trans 'A network error has occurred.' %} {% trans 'Please try again later.' %}
        </div>
        <div id="stats-server-error" class="text-red-500 px-4 hidden">
            <i data-feather="alert-triangle"></i> {% trans 'A server error has occurred.' %} {% trans 'Please contact the administrator.' %}
        </div>
        <div id="stats-loading" class="px-4 hidden">
            <i data-feather="loader" class="animate-spin"></i> {% trans '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>{% trans 'Invalid links' %}</td>
                    <td id="number_invalid_urls" class="text-right"></td>
                </tr>
                <tr>
                    <td>{% trans 'Valid links' %}</td>
                    <td id="number_valid_urls" class="text-right"></td>
                </tr>
                <tr>
                    <td>{% trans 'Ignored links' %}</td>
                    <td id="number_ignored_urls" class="text-right"></td>
                </tr>
                <tr>
                    <td class="pb-2 border-b border-gray-400">{% trans 'Unchecked links' %}</td>
                    <td id="number_unchecked_urls"
                        class="text-right border-b border-gray-400"></td>
                </tr>
                <tr>
                    <td class="pt-2">{% trans 'Total links' %}</td>
                    <td id="number_all_urls" class="text-right"></td>
                </tr>
            </tbody>
        </table>
    </div>
{% endblock %}
