{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>{% trans "Risk Management" %}</title>
  <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/design.css' %}">
  <link rel="stylesheet" href="{% static 'css/fontawesome.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
</head>
<body>
{% if messages %}
<div id="message-modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content" style="max-width: 400px;">
    <div class="box has-text-centered">
      {% for message in messages %}
        <p>{{ message }}</p>
      {% endfor %}
      <br>
      <button class="button is-primary close">OK</button>
    </div>
  </div>
  <button class="modal-close is-large delete" aria-label="close"></button>
</div>
{% endif %}

  <header class="topbar">
    <nav class="navbar topbar-nav" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item logo" href="/risks/index">
          <strong class="logo-text">WIRA Intranet</strong>
        </a>

        <!-- Burger Menu für Mobile -->
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNavbar">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="mainNavbar" class="navbar-menu">
        <div class="navbar-start">
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">{% trans "Risk Management" %}</a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="/risks/index">{% trans "Dashboard" %}</a>
              <a class="navbar-item" href="/risks/risk_matrix">{% trans "Risk Matrix" %}</a>
              <hr class="navbar-divider">
              <a class="navbar-item" href="/risks/list_risks">{% trans "Risk analysis" %}</a>
              <a class="navbar-item" href="/risks/list_controls">{% trans "Controls" %}</a>
              <a class="navbar-item" href="/risks/list_incidents">{% trans "Incidents" %}</a>
            </div>
          </div>

          {% load navigation %}
          {% render_extra_nav %}
        </div>
      </div>

      <!-- Profil -->
      <div class="navbar-end">
        <!-- Suche -->
        <div class="navbar-item">
        </div>

        {% if request.user.is_authenticated %}
          <!-- Profil-Dropdown -->
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              <!-- Initialen-Badge -->
            <span class="avatar-wrap">
              <span class="tag is-link is-light is-medium is-rounded"
                    style="width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;">
                {{ request.user.username|slice:":2"|upper }}
              </span>

              {% if notifications_unread_count %}
                <span class="badge tag is-danger is-rounded">
                  {% if notifications_unread_count > 99 %}99+{% else %}{{ notifications_unread_count }}{% endif %}
                </span>
              {% endif %}
            </span>


            </a>

            <div class="navbar-dropdown is-right">
              {% if request.user.is_staff %}
                <a class="navbar-item" href="/admin/">{% trans "AdminCP" %}</a>
                <hr class="navbar-divider">
              {% endif %}

              <a class="navbar-item" href="{% url 'risks:notifications' %}">
                {% trans "Notifications" %}
                {% if notifications_unread_count %}
                  <span class="tag is-danger is-rounded" style="margin-left:.5rem;">{{ notifications_unread_count }}</span>
                {% endif %}
              </a>

              <!-- Dark Mode Toggle -->
              <a id="dark-mode-toggle" class="navbar-item is-small is-light">
                🌙 {% trans "Derk Mode" %}
              </a>

              <!-- Logout als POST über Hidden-Form -->
              <a class="navbar-item" href="#"
                onclick="document.getElementById('logout-form').submit(); return false;">
                {% trans "Logout" %}
              </a>
            </div>
          </div><!-- Profil-Dropdown Ende -->

          <!-- Hidden Logout Form (muss im DOM vorhanden sein) -->
          <form id="logout-form" method="post" action="{% url 'logout' %}" style="display:none;">
            {% csrf_token %}
          </form>

        {% else %}
          <!-- Login-Button -->
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-primary is-light" href="{% url 'login' %}">
                <strong>{% trans "Login" %}</strong>
              </a>
            </div>
          </div>
        {% endif %}

    </nav>
  </header>

  <main class="content">
    {% block breadcrumbs %}
    <nav class="breadcrumb top-breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <a href="/risks/index">
            <span class="icon is-small">
              <i class="fas fa-home" aria-hidden="true" style="color: #6f3165"></i>
            </span>
          </a>
        </li>
        {% block crumbs %}
            {% if title %} &rsaquo; {{ title }}{% endif %}
        {% endblock %}
      </ul>
    </nav>
    {% endblock %}
    {% block content %}{% endblock %}
  </main>

  <script>
    const toggleButton = document.getElementById('dark-mode-toggle');

    // Dark Mode aus localStorage laden
    if (localStorage.getItem('darkMode') === 'enabled') {
      document.body.classList.add('dark-mode');
      toggleButton.textContent = '☀️ {% trans "Light Mode" %}';
    }

    toggleButton.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
      if (document.body.classList.contains('dark-mode')) {
        localStorage.setItem('darkMode', 'enabled');
        toggleButton.textContent = '☀️ {% trans "Light Mode" %}';
      } else {
        localStorage.setItem('darkMode', 'disabled');
        toggleButton.textContent = '🌙 {% trans "Dark Mode" %}';
      }
    });

    // Burger Menu für mobile
    document.addEventListener('DOMContentLoaded', () => {
      const burger = document.querySelector('.navbar-burger');
      const menu = document.getElementById(burger.dataset.target);

      burger.addEventListener('click', () => {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
      });
    });


    document.addEventListener('DOMContentLoaded', () => {
      const modal = document.getElementById('message-modal');
      if (!modal) return;

      // Funktion zum Öffnen
      function openModal() {
        modal.classList.add('is-active');
      }
      // Funktion zum Schließen
      function closeModal() {
        modal.classList.remove('is-active');
      }

      // Modal automatisch öffnen, weil eine Message da ist
      openModal();

      // Close-Elemente: Hintergrund, delete-Button, OK-Button
      modal.querySelector('.modal-background').addEventListener('click', closeModal);
      modal.querySelector('.delete').addEventListener('click', closeModal);
      modal.querySelector('.close').addEventListener('click', closeModal);

      // Escape drücken
      document.addEventListener('keydown', (e) => {
        if (e.key === "Escape" || e.key === "Esc") {
          closeModal();
        }
      });
    });

  </script>

</body>
</html>
