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

{% for incident in incidents %}
<div class="mb-3 mt-3">
    {% ifchanged incident.occurred|date:"DATE_FORMAT" %}
    <h3>{{ incident.occurred|date:"DATE_FORMAT" }}</h3>
    {% endifchanged %}
    <div class="card">
        <div class="card-header">
            <strong>{{ incident.name }}</strong>
            {% if perms.statusboard.delete_incident %}
            <small><a href="{% url 'statusboard:incident:delete' pk=incident.id %}">{% trans 'delete' %}</a></small>
            {% endif %}
            {% if perms.statusboard.change_incident %}
            <small><a href="{% url 'statusboard:incident:edit' pk=incident.id %}">{% trans 'edit' %}</a></small>
            {% endif %}
            <br/>
            {% for s in incident.services.all %}
            <span class="badge bg-secondary">{{ s.name }}</span>
            {% endfor %}
        </div>
        <ul class="list-group list-group-flush">
            {% for update in incident.updates_by_ctime %}
            <li class="list-group-item">
                <div class="row">
                    <div class="col col-lg-2">
                        <strong>{{ update.get_status_display }}</strong>
                    </div>
                    <div class="col">
                        <span>{{ update.description|urlize|linebreaksbr }}</span>
                        <small class="timeinfo">{% trans "last update" %} <abbr title="{{ update.modified|date:"r" }}">{{ update.modified|naturaltime }}</abbr></small>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
        <div class="card-footer">
            <small class="timeinfo">{% trans "occurred" %} <abbr title="{{ incident.occurred|date:"r" }}">{{ incident.occurred|naturaltime }}</abbr></small>
        </div>
    </div>
</div>
{% endfor %}
