{% extends "django_datawatch/base.html" %}
{% load i18n %}
{% load django_bootstrap5 %}

{% block django_datawatch %}
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">{% trans "Filter" %}</h5>
            <div>
                <form method="get" class="form-horizontal">
                    {% bootstrap_form form layout='horizontal' %}
                    <div class="offset-md-2 col-md-10">
                        {% trans "Filter" as trans_filter %}
                        {% bootstrap_button trans_filter button_type="submit" button_class="btn-primary" %}
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% regroup results by get_status_display as status_list %}
    <div class="row mb-4">
        {% if not status_list %}
            <div class="col-md-12">
                <div class="alert alert-info text-center">
                    <h3>{% trans "There is nothing to see here. Everything is fine!" %}</h3>
                </div>
            </div>
        {% else %}
            {% widthratio 12 status_list|length 1 as size %}
            {% for status in status_list %}
                {% for status_definition in results.get_stats %}
                    {% if status.grouper == status_definition.status_name %}
                        <div class="col-md-{{ size }}">
                            <a href="#status-{{ status_definition.status_name|slugify }}" class="btn col-md-12 {% if status_definition.status == check.STATUS.ok %}btn-success{% elif status_definition.status == check.STATUS.warning %}btn-warning{% elif status_definition.status == check.STATUS.critical %}btn-danger{% endif %}">
                                {{ status_definition.status_name }}<br>
                                <h3>{{ status_definition.amount }}</h3>
                            </a>
                        </div>
                    {% endif %}
                {% endfor %}
            {% endfor %}
        {% endif %}
    </div>

    <div class="row">
        <div class="col-md-12">
            {% for status in status_list %}
                <h3 id="status-{{ status.grouper|slugify }}">{{ status.grouper }}</h3>

                <table class="table table-bordered">
                    {% for result in status.list %}
                        <tr>
                            <td style="width: 20%;">
                                <span class="label label-{% if result.status == result.STATUS.critical %}danger{% elif result.status == result.STATUS.warning %}warning{% elif result.status == result.STATUS.ok %}success{% endif %}">{{ result.get_status_display }}</span>
                                {% if result.is_acknowledged %}
                                    <br>
                                    <span class="label label-default">{% blocktrans with date=result.acknowledged_until|date %}Acknowledged until {{ date }}{% endblocktrans %}</span>
                                {% endif %}
                                <div class="mt-2">
                                    {% for tag in result.resulttag_set.all %}
                                        <span class="badge {{ tag.badge_class }}">{{ tag.tag }}</span>
                                    {% empty %}
                                        {# no tags for this result #}
                                    {% endfor %}
                                </div>
                            </td>
                            <td style="width: 35%;">
                                <a href="{% url "django_datawatch_result" pk=result.pk %}">
                                    <strong>{{ result.get_check_instance.get_title }}</strong>
                                </a>
                            </td>
                            <td style="width: 45%;">
                                {{ result.payload_description|linebreaksbr }} {{ result.get_formatted_data|linebreaksbr }}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            {% endfor %}
        </div>
    </div>
{% endblock %}