{% 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>

    <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>
                <option>Vorfall A</option>
                <option>Vorfall B</option>
              </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>
                <option>Alle</option>
                <option>Risiko 1</option>
                <option>Risiko 2</option>
              </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>
                <option>All</option>
                <option>Opened</option>
                <option>In progress</option>
                <option>Closed</option>
              </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>
                <option>Kevin Heyer</option>
                <option>Stefan Lange</option>
                <option>Kirsten Herzhoff</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <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>
          <tr onclick="window.location.href='/risks/incidents/1';" style="cursor:pointer;">
            <td>Switch entwendet</td>
            <td>
              <ul>
                <li>
                  <a href="/risks/risks/1" onclick="event.stopPropagation();">Hardware Diebstahl</a>
                </li>
              </ul>
            </td>
            <td>Closed</td>
            <td>08.09.2025</td>
            <td>Kevin Heyer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

{% endblock %}