{% extends "base.html" %}
{% load i18n risk_extras %}
{% block crumbs %}
  <li><a href="{% url 'risks:risk_matrix' %}">{% trans "Risk Matrix" %}</a></li>
{% endblock %}
{% block content %}
<section class="section">

  <!-- Tabs -->
  <div class="tabs is-boxed" role="tablist">
    <ul>
      <li class="is-active" data-tab="riskmatrix" role="tab" aria-selected="true"><a>{% trans "Risk Matrix" %}</a></li>
      <li data-tab="details" role="tab" aria-selected="false"><a>{% trans "Detail View" %}</a></li>
    </ul>
  </div>

  <div class="box">
    <h2 class="title is-4">{% trans "Risk Matrix" %}</h2>

    {# Panel: Brutto (Score-Matrix) #}
    <div class="tab-panel" data-tab="riskmatrix">
      <table class="table is-bordered has-text-centered risk-matrix-table">
        <thead>
          <tr>
            <th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
            {% for l_val, l_label in likelihoods %}
              <th class="py-6 {{ l_val|likelihood_class|to_bg }}">{{ l_label }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for i_val, i_label in impacts reversed %}
            <tr>
              <th class="py-6 has-text-left {{ i_val|impact_class|to_bg }}">{{ i_label }}</th>
              {% for l_val, l_label in likelihoods %}
                {% with s=i_val|mul:l_val %}
                  <td class="risk-matrix-cell {{ s|score_bg_class }}">
                    <div class="is-flex is-justify-content-center is-align-items-center py-6">
                      <span class="tag is-light is-rounded">{% trans "Score" %} {{ s }}</span>
                    </div>
                  </td>
                {% endwith %}
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {# Panel: Details (Listen je Zelle, mit Brutto/Netto-Umschalter) #}
    <div class="tab-panel is-hidden" data-tab="details">
      <div class="level mb-3">
        <div class="level-left">
          <div class="level-item"><strong>{% trans "Show" %}:</strong></div>
          <div class="level-item">
            <div class="buttons has-addons">
              <button type="button" class="button is-small is-info is-light details-toggle is-active" data-mode="gross">
                {% trans "Gross" %}
              </button>
              <button type="button" class="button is-small is-info is-light details-toggle" data-mode="net">
                {% trans "Net" %}
              </button>
            </div>
          </div>
        </div>
      </div>

      {# Brutto-Listen #}
      <div class="details-table" data-mode="gross">
        <table class="table is-bordered has-text-centered risk-matrix-table">
          <thead>
            <tr>
              <th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
              {% for l_val, l_label in likelihoods %}
                <th class="py-6 {{ l_val|likelihood_class|to_bg }}">{{ l_label }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for i_val, i_label in impacts reversed %}
              <tr>
                <th class="py-6 has-text-left {{ i_val|impact_class|to_bg }}">{{ i_label }}</th>
                {% for l_val, l_label in likelihoods %}
                  {% with row=gross_matrix|dict_get:i_val %}
                  {% with cell=row|dict_get:l_val %}
                    {% with s=i_val|mul:l_val %}
                      <td class="risk-matrix-cell {{ s|score_bg_class }}">
                        {% if cell and cell|length %}
                          <ul class="risk-cell-list">
                            {% for risk in cell %}
                              <li style="list-style: none;">
                                <a href="{% url 'risks:show_risk' risk.id %}" class="tag">{{ risk.title }}</a>
                              </li>
                            {% endfor %}
                          </ul>
                        {% else %}
                          <span class="has-text-grey">–</span>
                        {% endif %}
                      </td>
                    {% endwith %}
                  {% endwith %}
                  {% endwith %}
                {% endfor %}
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {# Netto-Listen #}
      <div class="details-table is-hidden" data-mode="net">
        <table class="table is-bordered has-text-centered risk-matrix-table">
          <thead>
            <tr>
              <th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
              {% for l_val, l_label in likelihoods %}
                <th class="py-6 {{ l_val|likelihood_class|to_bg }}">{{ l_label }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for i_val, i_label in impacts reversed %}
              <tr>
                <th class="py-6 has-text-left {{ i_val|impact_class|to_bg }}">{{ i_label }}</th>
                {% for l_val, l_label in likelihoods %}
                  {% with row=net_matrix|dict_get:i_val %}
                  {% with cell=row|dict_get:l_val %}
                    {% with s=i_val|mul:l_val %}
                      <td class="risk-matrix-cell {{ s|score_bg_class }}">
                        {% if cell and cell|length %}
                          <ul class="risk-cell-list">
                            {% for risk in cell %}
                              <li style="list-style: none;">
                                <a href="{% url 'risks:show_risk' risk.id %}" class="tag">{{ risk.title }}</a>
                              </li>
                            {% endfor %}
                          </ul>
                        {% else %}
                          <span class="has-text-grey">–</span>
                        {% endif %}
                      </td>
                    {% endwith %}
                  {% endwith %}
                  {% endwith %}
                {% endfor %}
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

  </div>
</section>

<style>
  .risk-matrix-table th, .risk-matrix-table td { padding: .5rem; }
  .risk-matrix-cell { min-height: 120px; vertical-align: middle; }
  .tab-panel.is-hidden { display: none; }
  .risk-cell-list { text-align: left; margin: 0; padding-left: 1rem; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Tabs
  const tabs = document.querySelectorAll('.tabs li[data-tab]');
  const panels = document.querySelectorAll('.tab-panel');
  tabs.forEach(t => t.addEventListener('click', () => {
    tabs.forEach(x => { x.classList.remove('is-active'); x.setAttribute('aria-selected','false'); });
    t.classList.add('is-active'); t.setAttribute('aria-selected','true');
    const target = t.getAttribute('data-tab');
    panels.forEach(p => p.classList.toggle('is-hidden', p.getAttribute('data-tab') !== target));
  }));

  // Umschalter im „Details“-Tab
  const toggles = document.querySelectorAll('.details-toggle');
  const tables  = document.querySelectorAll('.details-table');
  toggles.forEach(btn => btn.addEventListener('click', () => {
    const mode = btn.getAttribute('data-mode'); // 'gross' | 'net'
    toggles.forEach(b => b.classList.toggle('is-active', b === btn));
    tables.forEach(t => t.classList.toggle('is-hidden', t.getAttribute('data-mode') !== mode));
  }));
});
</script>
{% endblock %}