{% extends "esistatus/base.html" %}

{% load i18n %}
{% load esistatus %}

{% block aa_esistatus_header %}
    {% translate "ESI Status" as translated_header %}
    {% include "esistatus/partials/header/page-header.html" with header_text=translated_header %}
{% endblock %}

{% block aa_esistatus_body %}
    <div class="row">
        {% if has_status_result %}
            {% translate "Red endpoints" as translated_header_red %}
            {% translate "Red endpoints have a good chance of not responding at all or being completely unavailable." as translated_header_red_explanation %}
            {% include 'esistatus/partials/endpoints.html' with title=translated_header_red status="red" explanation=translated_header_red_explanation data=esi_endpoint_status.red with_details=True %}

            {% translate "Yellow endpoints" as translated_header_yellow %}
            {% translate "Yellow endpoints have a good chance of being slow or returning errors." as translated_header_yellow_explanation %}
            {% include 'esistatus/partials/endpoints.html' with title=translated_header_yellow status="yellow" explanation=translated_header_yellow_explanation data=esi_endpoint_status.yellow with_details=True %}

            {% translate "Green endpoints" as translated_header_green %}
            {% translate "Green endpoints are responding as expected." as translated_header_green_explanation %}
            {% include 'esistatus/partials/endpoints.html' with title=translated_header_green status="green" explanation=translated_header_green_explanation data=esi_endpoint_status.green with_details=True %}
        {% else %}
            <div class="col-12">
                <p class="alert alert-warning text-center">
                    {% translate "Couldn't read the ESI status. Please try and reload the page. If that doesn't help, it is possible that ESI might be down entirely." %}
                </p>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block extra_css %}
    {% include "esistatus/bundles/esistatus-css.html" %}
{% endblock %}

{% block extra_javascript %}
    <script>
    $(document).ready(() => {
        // Initialize Bootstrap tooltips
        [].slice.call(document.querySelectorAll('[data-bs-tooltip="aa-esi-status"]'))
            .map((tooltipTriggerEl) => {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
    });
    </script>
{% endblock %}
