{% extends 'base.html' %}
{% load ui_extras incidents_extras %}

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  {% for url, anchor_text in breadcrumbs %}
  {% if url %}
  <li class="breadcrumb-item"><a href="{{ url }}">{{ anchor_text }}</a>
  {% else %}
  <li class="breadcrumb-item active">{{ anchor_text }}</li>
  {% endif %}
  {% endfor %}
</ol>

<div class="d-flex justify-content-between mb-3">
    <h2 class="m-0">Incident{{ paginator.count|pluralize }} ({{ paginator.count }})</h2>
</div>

<div class="d-flex flex-wrap align-items-center mb-1">
    <form method="GET" class="search-form">

        {{ form }}

        <button type="submit" class="btn btn-link mb-2">
            <i class="bi bi-search"></i>
        </button>
    </form>
</div>

{% if object_list %}
    {% pagination next_url previous_url %}

    <div class="table-responsive mb-3">
        <table class="table table-striped align-middle table-hover">
            <thead>
            <th>Name</th>
            <th>Status</th>
            <th>Severity</th>
            <th>Created at</th>
            </thead>
            <tbody>
            {% for incident in object_list %}
            <tr>
            <td><a href="{{ incident.get_absolute_url }}">{{ incident.name }}</a></td>
            <td>{{ incident.get_status_display }}</td>
            <td>{% incident_severity incident.severity %}</td>
            <td>{{ incident.created_at }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {% pagination next_url previous_url %}
{% elif form.has_changed %}
    {% url 'incidents:index' as empty_results_url %}
    {% empty_results empty_results_url %}
{% endif %}

{% endblock %}