{% load i18n %}

<div class="card">
    <div class="card-body">
        <div class="text-center">
            <h4 class="ms-auto me-auto mb-3">
                <svg class="svg-sprite svg-esi-logo">
                    <use href="#esistatus-esi-logo"></use>
                </svg>
                {% translate "Status" %}
            </h4>
        </div>

        {% if esi_endpoint_status %}
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-5 mb-3">
                <!-- OK Routes -->
                {% translate "OK" as translated_header_green %}
                {% translate "These routes are working as expected." as translated_header_green_explanation %}
                {% include 'esistatus/partials/endpoints.html' with title=translated_header_green status="OK" explanation=translated_header_green_explanation data=esi_endpoint_status.OK with_details=False %}

                <!-- Degraded Routes -->
                {% translate "Degraded" as translated_header_yellow %}
                {% translate "These routes 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="Degraded" explanation=translated_header_yellow_explanation data=esi_endpoint_status.Degraded with_details=False %}

                <!-- Down Routes -->
                {% translate "Down" as translated_header_red %}
                {% translate "These routes 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="Down" explanation=translated_header_red_explanation data=esi_endpoint_status.Down with_details=False %}

                <!-- Recovering Routes -->
                {% translate "Recovering" as translated_header_red %}
                {% translate "These routes are recovering from previous issues and might not (yet) work as expected or might be slow." as translated_header_red_explanation %}
                {% include 'esistatus/partials/endpoints.html' with title=translated_header_red status="Recovering" explanation=translated_header_red_explanation data=esi_endpoint_status.Recovering with_details=False %}

                <!-- Unknown Routes -->
                {% translate "Unknown" as translated_header_red %}
                {% translate "These routes have an unknown status." as translated_header_red_explanation %}
                {% include 'esistatus/partials/endpoints.html' with title=translated_header_red status="Unknown" explanation=translated_header_red_explanation data=esi_endpoint_status.Unknown with_details=False %}
            </div>

            {% if compatibility_date %}
                <div class="text-start float-start">
                    <p class="small mb-0">
                        {% translate "ESI compatibility date" %}:
                        <a
                            href="https://esi.evetech.net/meta/compatibility-dates"
                            target="_blank"
                            rel="noopener noreferer"
                        >
                            {{ compatibility_date }}
                        </a>
                    </p>
                </div>
            {% endif %}

            <div class="text-end float-end">
                <p class="small mb-0">
                    <a href="{% url 'esistatus:index' %}">{% translate "Detailed ESI status" %}</a>
                    |
                    <a href="https://status.eveonline.com/" target="_blank" rel="noopener noreferer">{% translate "EVE Online status" %}</a>
                </p>
            </div>
        {% else %}
            <div class="aa-callout aa-callout-info">
                <p>{% translate "No ESI status data is available at this time." %}</p>
            </div>
        {% endif %}
    </div>
</div>
