ISO-27001-Risk-Management/templates/risks/risk_matrix.html

{% extends "base.html" %}
{% load i18n risk_extras %}
{% block crumbs %}
  <li><a href="{% url 'risks:risk_matrix' %}">{% trans "Risk Matrix" %}</a></li>
{% endblock %}
{% block content %}
<div class="erp-tabs">
  <a class="is-active" data-tab="matrix">{% trans "Risk Matrix" %}</a>
  <a data-tab="details">{% trans "Detail View" %}</a>
</div>
<section class="section">
  <div class="box">
    <!-- Panel: Matrix View -->
    <div class="tab-panel" data-tab="matrix">
      <table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
        <thead>
          <tr>
            <th class="has-text-left">{% trans "Impact" %} * {% trans "Likelihood" %}</th>
            {% for likelihood in likelihoods %}
              <th class="{{ likelihood.value|likelihood_class|to_bg }}">
                {{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for impact in impacts reversed %}
            <tr>
              <th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
              {% for likelihood in likelihoods %}
                {% with s=impact.value|mul:likelihood.value %}
                  <td class="risk-matrix-cell {{ s|score_bg_class }}">
                    <div class="is-flex is-justify-content-center is-align-items-center">
                      {% if s <= 4 %}
                        <span class="tag is-control-verylow is-light">Low ({{ s }})</span>
                      {% elif s <= 8 %}
                        <span class="tag is-control-low is-light">Medium ({{ s }})</span>
                      {% elif s <= 12 %}
                        <span class="tag is-control-mid is-light">High ({{ s }})</span>
                      {% else %}
                        <span class="tag is-control-veryhigh is-light">Critical ({{ s }})</span>
                      {% endif %}
                    </div>
                  </td>
                {% endwith %}
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <!-- Panel: Details View -->
    <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>
      <!-- Gross Risk List -->
      <div class="details-table" data-mode="gross">
        <table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
          <thead>
            <tr>
              <th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
              {% for likelihood in likelihoods %}
                <th class="{{ likelihood.value|likelihood_class|to_bg }}">{{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for impact in impacts reversed %}
              <tr>
                <th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
                {% for likelihood in likelihoods %}
                  {% with row=gross_matrix|dict_get:impact.value %}
                    {% with cell=row|dict_get:likelihood.value %}
                      {% with s=impact.value|mul:likelihood.value %}
                        <td class="risk-matrix-cell {{ likelihood|likelihood_class }}">
                          {% if cell %}
                            <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>
      <!-- Net Risk List -->
      <div class="details-table is-hidden" data-mode="net">
        <table class="table is-bordered is-fullwidth has-text-centered risk-matrix-table">
          <thead>
            <tr>
              <th class="has-text-left">{% trans "Impact" %} / {% trans "Likelihood" %}</th>
              {% for likelihood in likelihoods %}
                <th class="{{ likelihood.value|likelihood_class|to_bg }}">{{ likelihood.value }} ({{ likelihood.name }}) <br> {{ likelihood.description }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for impact in impacts reversed %}
              <tr>
                <th class="has-text-left {{ impact.value|impact_class|to_bg }}">{{ impact.value }} - {{ impact.name }}<br>{{ impact.description }}</th>
                {% for likelihood in likelihoods %}
                  {% with row=net_matrix|dict_get:impact.value %}
                    {% with cell=row|dict_get:likelihood.value %}
                      {% with s=impact.value|mul:likelihood.value %}
                        <td class="risk-matrix-cell {{ likelihood|likelihood_class }}">
                          {% if cell %}
                            <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>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const tabs   = document.querySelectorAll('.erp-tabs a[data-tab]');
  const panels = document.querySelectorAll('.tab-panel');
  tabs.forEach(tab => {
    tab.addEventListener('click', e => {
      e.preventDefault();
      tabs.forEach(x => x.classList.remove('is-active'));
      panels.forEach(p => p.classList.add('is-hidden'));
      tab.classList.add('is-active');
      const target = tab.getAttribute('data-tab');
      const activePanel = document.querySelector(`.tab-panel[data-tab="${target}"]`);
      if (activePanel) activePanel.classList.remove('is-hidden');
    });
  });
  const toggles = document.querySelectorAll('.details-toggle');
  const tables  = document.querySelectorAll('.details-table');
  toggles.forEach(btn => {
    btn.addEventListener('click', () => {
      const mode = btn.getAttribute('data-mode');
      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 %}