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

{% block crumbs %}
  <li><a href="{% url 'risks:list_controls' %}">{% trans "Controls" %}</a></li>
  <li><a href="{% url 'admin:risks_control_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: Control -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Control" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="control" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for c in control_choices %}
              <option value="{{ c.id }}" {% if request.GET.control == c.id|stringformat:"s" %}selected{% endif %}>
                {{ c.title }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div><!-- Filter: Control End -->

      <!-- Filter: Risk -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Risk" %}</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: Responsible -->
      <div class="column is-2">
        <label class="label is-small">{% trans "Responsible" %}</label>
        <div class="select is-small is-fullwidth">
          <select name="responsible" onchange="this.form.submit()">
            <option value="">{% trans "All" %}</option>
            {% for u in responsible_choices %}
              <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><!-- Filter: Responsible End -->

      <!-- Filter: Reset -->
      <div class="column is-2">
        <label class="label is-small">&nbsp;</label>
        <div class="control">
          <a href="{% url 'risks:list_controls' %}" 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 -->

<!-- Controls 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 "Control" %}</th>
        <th class="has-text-centered">{% trans "Related Risk" %}</th>
        <th class="has-text-centered">{% trans "Responsible" %}</th>
        <th class="has-text-centered">{% trans "Status" %}</th>
        <th class="has-text-centered">{% trans "Deadline" %}</th>
        <th class="has-text-centered">{% trans "Link" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for c in controls %}
      <tr onclick="window.location.href='{% url 'risks:show_control' c.id %}'" style="cursor:pointer;">
        <td class="has-text-centered">{{ c.id }}</td>
        <td>{{ c.title }}</td>
        <td>
          {% if c.risks.all %}
            <ul>
            {% for r in c.risks.all %}
              <li>
                <a href="{% url 'risks:show_risk' r.id %}" onclick="event.stopPropagation();">
                  {{ r.title }}
                </a>
              </li>
            {% endfor %}
            </ul>
          {% else %}
            -
          {% endif %}
        </td>
        <td class="has-text-centered">
          {% if c.responsible %}
            {{ c.responsible.get_full_name|default:c.responsible.username }}
          {% else %}
            –
          {% endif %}
        </td>
        <td class="has-text-centered">
            <div class="tag 
            {% if c.status == 'planned' %}
              is-info
            {% elif c.status == 'completed' %}
              is-success
            {% elif c.status == 'verified' %}
              is-success
            {% elif c.status == 'in_progress' %}
              is-link is-light
            {% endif %}
          ">
            {{ c.get_status_display }}
          </div>
        </td>
        <td class="has-text-centered">
          {% if c.due_date %}
            {{ c.due_date|date:"d.m.Y" }}
          {% else %}
            –
          {% endif %}
        </td>
        <td class="has-text-centered">
          {% if c.wiki_link %}
            <a href="{{ c.wiki_link }}" target="_blank">🔗</a>
          {% else %}
            –
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" class="has-text-grey has-text-centered">{% trans "No controls found." %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div><!-- Controls Table End -->

{% endblock %}