{% extends "base.html" %}
{% load i18n %}
{% block content %}
<!-- Hero Section -->
<section class="hero is-small is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-1 has-text-black">
        {% trans "Dashboard" %}
      </h1>
      <h2 class="subtitle is-4 has-text-black">
        {% trans "Overview of Risks, Controls and Incidents" %}
      </h2>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <!-- Gesamt-Risiken -->
      <div class="column is-one-quarter">
        <div class="box has-background-control-mid has-text-centered">
          <h2 class="title is-4">{{ risks_total }}</h2>
          <p>{% trans "Total Risks" %}</p>
        </div>
      </div>

      <!-- Residual-Risiken -->
      <div class="column is-one-quarter">
        <div class="box has-text-centered {% if residual_review_required > 0 %}has-background-control-high{% else %}has-background-control-low{% endif %}">
          <h2 class="title is-4">{{ residual_review_required }}</h2>
          <p>{% trans "Residual Risks Needing Review" %}</p>
        </div>
      </div>

      <!-- Ungelesene Notifications -->
      <div class="column is-one-quarter">
        <div class="box has-background-control-mid has-text-centered">
          <h2 class="title is-4">{{ notifications_unread }}</h2>
          <p>{% trans "Unread Notifications" %}</p>
        </div>
      </div>
    </div>

    <!-- Controls by Status -->
    <div class="box">
      <h2 class="subtitle">{% trans "Controls by Status" %}</h2>
      <ul>
        {% for status in controls_by_status %}
          <li>{{ status.status }}: {{ status.count }}</li>
        {% endfor %}
      </ul>
    </div>

    <!-- Incidents by Status -->
    <div class="box">
      <h2 class="subtitle">{% trans "Incidents by Status" %}</h2>
      <ul>
        {% for incident in incidents_status %}
          <li>{{ incident.status }}: {{ incident.count }}</li>
        {% endfor %}
      </ul>
    </div>

    <!-- Risks by CIA -->
    <div class="box">
      <h2 class="subtitle">{% trans "Risks by CIA" %}</h2>
      <div class="columns is-multiline">
        {% for cia, count in risks_by_cia.items %}
          <div class="column is-one-quarter">
            {% if cia == '1' %}
              <div class="box has-background-control-verylow has-text-centered">
                <h3 class="title is-5">{% trans "Confidentiality" %}</h3>
                <p>{{ count }} Risks</p>
              </div>
            {% elif cia == '2' %}
              <div class="box has-background-control-mid has-text-centered">
                <h3 class="title is-5">{% trans "Integrity" %}</h3>
                <p>{{ count }} Risks</p>
              </div>
            {% elif cia == '3' %}
              <div class="box has-background-control-high has-text-centered">
                <h3 class="title is-5">{% trans "Availability" %}</h3>
                <p>{{ count }} {% trans "Risks" %}</p>
              </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>

  </div>
</section>
{% endblock %}