{% extends "base.html" %}
{% block crumbs %}
  <li><a href="{% url 'risks:list_incidents' %}">Vorfälle</a></li>
{% endblock %}
{% block content %}
<!-- Filter -->
<section class="section">
  <div class="box">
    <h2 class="title is-5">Auswahl</h2>

    <form method="get">
      <div class="columns is-multiline">

        <!-- Vorfälle -->
        <div class="column is-3">
          <div class="field">
            <label class="label">Vorfall</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select>
                  <option>Alle</option>
                  {% for i in incidents %}
                  <option value="{{ i.id }}" {% if request.GET.risk == i.id|stringformat:"s" %}selected{% endif %}>
                    {{ i.title }}
                  </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- Risiko -->
        <div class="column is-3">
          <div class="field">
            <label class="label">Risiko</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select name="risk" onchange="this.form.submit()">
                  <option value="">Alle</option>
                  {% for r in risks %}
                    <option value="{{ r.id }}" {% if request.GET.risk == r.id|stringformat:"s" %}selected{% endif %}>
                      {{ r.title }}
                    </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- Status -->
        <div class="column is-3">
          <div class="field">
            <label class="label">Status</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select name="status" onchange="this.form.submit()">
                  <option value="">Alle</option>
                  {% for key,label in status_choices %}
                  <option value="{{ key }}" {% if request.GET.status == key %}selected{% endif %}>
                    {{ label }}
                  </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- Melder -->
        <div class="column is-3">
          <div class="field">
            <label class="label">Meldende Person</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select>
                  <option>Alle</option>
                  {% for u in users %}
                  <option value="{{ u.id }}" {% if request.GET.responsible == u.id|stringformat:"s" %}selected{% endif %}>
                    {{ u.get_full_name|default:u.username }}
                  </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

    <h2 class="title is-5">Vorfälle</h2>

    <div class="table-container">
      <table class="table is-bordered is-striped is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>Vorfall</th>
            <th>Zugehörige Risiken</th>
            <th>Status</th>
            <th>Gemeldet am</th>
            <th>Gemeldet von</th>
          </tr>
        </thead>
        <tbody>
          {% for i in incidents %}
          <tr onclick="window.location.href='{% url 'risks:show_incident' i.id %}'" style="cursor:pointer;">
            <td>{{ i.title }}</td>
            <td>
              {% if i.related_risks.exists %}
              <ul>
                {% for r in i.related_risks.all %}
                  <li>{{ r.title }}</li>
                {% endfor %}
              {% else %}
                Noch kein Risiko zugeordnet
              {% endif %}
              </ul>
            </td>
            <td>{{ i.get_status_display }}</td>
            <td>{{ i.date_reported|date:"d.m.Y" }}</td>
            <td>{{ i.reported_by }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{% endblock %}