{% load humanize %}
{% load statusboard %}
{% load i18n %}

{% for grp in servicegroups %}
<div class="servicegroup {% if grp.is_empty_group %}servicegroup-empty{% endif %}">
    {% if grp.is_empty_group != True or perms.statusboard.change_servicegroup or perms.statusboard.delete_servicegroup %}
    <div class="card">
        <div class="card-header">
            <strong>
                <a class="servicegroup-name {% if grp.collapsed %}collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#servicegroup-{{ grp.id}}-panel-body">
                    {{ grp.name }}
                </a>
            </strong>
            {% if perms.statusboard.delete_servicegroup %}
            <small><a href="{% url 'statusboard:servicegroup:delete' pk=grp.id %}">{% trans 'delete' %}</a></small>
            {% endif %}
            {% if perms.statusboard.change_servicegroup %}
            <small><a href="{% url 'statusboard:servicegroup:edit' pk=grp.id %}">{% trans 'edit' %}</a></small>
            {% endif %}
            <i class="bi bi-circle-fill float-end text-{{ grp.worst_service.status|service_status_class:"" }}" title="{{ grp.worst_service.get_status_display }}"></i>
        </div>
        <div id="servicegroup-{{ grp.id}}-panel-body" class="collapse {% if not grp.collapsed %}show{% endif %}">
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    {% for srv in grp.services.priority_sorted %}
                    <li class="list-group-item clearfix">
                        {% if srv.href %}
                        <a href="{{ srv.href }}">{{ srv.name }}</a>
                        {% else %}
                        <span>{{ srv.name }}</span>
                        {% endif %}
                        {% if srv.description %}
                        <i class="bi bi-question-circle-fill" title="{{ srv.description }}"></i>
                        {% endif %}
                        {% if perms.statusboard.delete_service %}
                        <small><a href="{% url 'statusboard:service:delete' pk=srv.id %}">{% trans 'delete' %}</a></small>
                        {% endif %}
                        {% if perms.statusboard.change_service %}
                        <small><a href="{% url 'statusboard:service:edit' pk=srv.id %}">{% trans 'edit' %}</a></small>
                        {% endif %}

                        <div class="float-end">
                            <span class="badge float-end text-bg-{{ srv.status|service_status_class:"" }}">{{ srv.get_status_display }}</span>
                        </div>
                        <small class="timeinfo">{% trans "last update" %} <abbr title="{{ srv.modified|date:"r" }}">{{ srv.modified|naturaltime }}</abbr></small>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endfor %}
{% if uncategorized.count %}
<div class="servicegroup">
    <div class="card">
        <div class="card-header">
            <strong>
                <a class="servicegroup-name" data-bs-toggle="collapse" data-bs-target="#servicegroup-{{ grp.id}}-panel-body">
                    {% trans "Uncategorized" %}
                </a>
            </strong>
            <i class="bi bi-circle-fill float-end text-{{ uncategorized.worst_service.status|service_status_class:"" }}" title="{{ uncategorized.worst_service.get_status_display }}"></i>
        </div>
        <div id="servicegroup-{{ grp.id}}-panel-body" class="collapse show">
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    {% for srv in uncategorized %}
                    <li class="list-group-item clearfix">
                        {% if srv.href %}
                        <a href="{{ srv.href }}">{{ srv.name }}</a>
                        {% else %}
                        <span>{{ srv.name }}</span>
                        {% endif %}
                        {% if srv.description %}
                        <i class="bi bi-question-circle-fill" title="{{ srv.description }}"></i>
                        {% endif %}
                        {% if perms.statusboard.delete_service %}
                        <small><a href="{% url 'statusboard:service:delete' pk=srv.id %}">{% trans 'delete' %}</a></small>
                        {% endif %}
                        {% if perms.statusboard.change_service %}
                        <small><a href="{% url 'statusboard:service:edit' pk=srv.id %}">{% trans 'edit' %}</a></small>
                        {% endif %}

                        <div class="float-end">
                            <span class="badge float-end text-bg-{{ srv.status|service_status_class:"" }}">{{ srv.get_status_display }}</span>
                        </div>
                        <small class="timeinfo">{% trans "last update" %} <abbr title="{{ srv.modified|date:"r" }}">{{ srv.modified|naturaltime }}</abbr></small>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endif %}
