<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>{% block title %}RadMac{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
  <nav>
    <div class="links">
      <a href="{{ url_for('index_redirect') }}">Home</a>
      <a href="{{ url_for('user.user_list') }}">Users</a>
      <a href="{{ url_for('group.group_list') }}">Groups</a>
      <a href="{{ url_for('stats.stats_page') }}">Stats</a>
    </div>
    <div class="right">
      <button id="theme-toggle">🌓 Theme</button>
    </div>
  </nav>

  {% block content %}{% endblock %}

  <div id="toast" class="toast"></div>
  <button id="scrollTopBtn" title="Back to top">⬆</button>

  <script>
    // Theme toggle
    const toggleBtn = document.getElementById('theme-toggle');
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);

    toggleBtn.addEventListener('click', () => {
      const current = document.documentElement.getAttribute('data-theme') || 'dark';
      const next = current === 'light' ? 'dark' : 'light';
      document.documentElement.setAttribute('data-theme', next);
      localStorage.setItem('theme', next);
    });

    // Toast function
    window.showToast = function (msg, duration = 3000) {
      const toast = document.getElementById('toast');
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), duration);
    };

    // Scroll-to-top button
    const scrollBtn = document.getElementById('scrollTopBtn');
    window.onscroll = () => {
      scrollBtn.style.display = window.scrollY > 150 ? 'block' : 'none';
    };
    scrollBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });

    // Preserve scroll position
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('scrollTop', window.scrollY);
    });

    window.addEventListener('load', () => {
      const scrollTop = sessionStorage.getItem('scrollTop');
      if (scrollTop !== null) {
        window.scrollTo(0, parseInt(scrollTop));
        sessionStorage.removeItem('scrollTop');
      }
    });
  </script>
</body>
</html>
