{% extends "base.html" %}
{% load i18n risk_extras %}

{% block crumbs %}
  <li><a href="{% url 'risks:list_incidents' %}">{% trans "Incidents" %}</a></li>
  <li><a href="{% url 'admin:risks_incident_add' %}"><span class="icon breadcrumb-add-icon"><i class="fas fa-add"></i></span></a></li>
{% endblock %}

{% block content %}

<!-- Filter Section -->
<section class="section has-background-light py-2">
  <form method="get" class="mb-4">
    <div class="columns is-multiline is-vcentered">

      <!-- Filter: Incident -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Incidents" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="incident" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for i in incident_choices %}
              <option value="{{ i.id }}" {% if request.GET.incident == i.id|stringformat:"s" %}selected{% endif %}>
                {{ i.title }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div><!-- Filter: Incident End -->

      <!-- Filter: Risk -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Risks" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="risk" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for r in risk_choices %}
              <option value="{{ r.id }}" {% if request.GET.risk == r.id|stringformat:"s" %}selected{% endif %}>
                {{ r.title }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div><!-- Filter: Risk End -->

      <!-- Filter: Status -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Status" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="status" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for key,label in status_choices %}
              <option value="{{ key }}" {% if request.GET.status == key %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div><!-- Filter: Status End -->

      <!-- Filter: Reporter -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Reported by" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="reporter" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for u in user_choices %}
              <option value="{{ u.id }}" {% if request.GET.reporter == u.id|stringformat:"s" %}selected{% endif %}>
                {{ u.get_full_name|default:u.username }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div><!-- Filter: Reporter End -->

      <!-- Filter: Reset -->
      <div class="column is-2">
        <label class="label is-small">&nbsp;</label>
        <div class="control">
          <a href="{% url 'risks:list_incidents' %}" class="button is-small is-light is-fullwidth">
            <span class="icon"><i class="fas fa-undo"></i></span>
            <span>{% trans "Reset filters" %}</span>
          </a>
        </div>
      </div><!-- Filter: Reset End -->

    </div>
  </form>
</section><!-- Filter Section End -->

<!-- Incidents Table -->
<div class="table-container">
  <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <thead>
      <tr class="has-background-prosoft">
        <th class="has-text-centered">{% trans "No." %}</th>
        <th class="has-text-centered">{% trans "Incident" %}</th>
        <th class="has-text-centered">{% trans "Linked Risks" %}</th>
        <th class="has-text-centered">{% trans "Status" %}</th>
        <th class="has-text-centered has-text-prosoft">{% trans "Reported on" %}</th>
        <th class="has-text-centered has-text-prosoft">{% trans "Reported by" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for i in incidents %}
      <tr onclick="window.location.href='{% url 'risks:show_incident' i.id %}'" style="cursor:pointer;">
        <td>{{ i.id }}</td>
        <td>{{ i.title }}</td>
        <td>
          {% if i.related_risks.exists %}
            <ul>
              {% for r in i.related_risks.all %}
                <li>{{ r.title }}</li>
              {% endfor %}
            </ul>
          {% else %}
            <span class="has-text-grey">–</span>
          {% endif %}
        </td>
        <td>{{ i.get_status_display }}</td>
        <td>{{ i.date_reported|date:"d.m.Y" }}</td>
        <td>{{ i.reported_by|default:"–" }}</td>
      </tr>
      {% empty %}
      <tr><td colspan="6" class="has-text-grey has-text-centered">{% trans "No incidents found." %}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div><!-- Incidents Table End -->

{% endblock %}