{% extends "core/shell.html" %}

{% block head_assets %}
  <!-- Bootstrap 5.3 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
  <!-- Elevate Custom Theme CSS -->
  <link rel="stylesheet" href="/static/themes/elevate/theme.css" />
{% endblock %}

{% block head_extra %}
  <script>
    (function() {
      const savedTheme = localStorage.getItem('elevate_theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-bs-theme', savedTheme);
      document.addEventListener('DOMContentLoaded', function() {
        if (savedTheme === 'dark') {
          document.body.classList.add('theme-dark');
        } else {
          document.body.classList.remove('theme-dark');
        }
        const btnIcon = document.getElementById('elevate-theme-icon');
        const btnText = document.getElementById('elevate-theme-text');
        if (btnIcon) btnIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
        if (btnText) btnText.textContent = savedTheme === 'dark' ? 'Light' : 'Dark';
      });
    })();
  </script>
  {% if plugin_area_head %}{{ plugin_area_head | safe }}{% endif %}
{% endblock %}

{% block navbar %}
  {% include "partials/navbar.html" %}
{% endblock %}

{% block content %}
{% endblock %}

{% block footer %}
  {% include "partials/footer.html" %}
{% endblock %}

{% block scripts %}
  <!-- Bootstrap 5.3 JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    function toggleElevateTheme() {
      const current = document.documentElement.getAttribute('data-bs-theme') || 'light';
      const next = current === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-bs-theme', next);
      if (next === 'dark') {
        document.body.classList.add('theme-dark');
      } else {
        document.body.classList.remove('theme-dark');
      }
      localStorage.setItem('elevate_theme', next);

      const btnIcon = document.getElementById('elevate-theme-icon');
      const btnText = document.getElementById('elevate-theme-text');
      if (btnIcon) btnIcon.textContent = next === 'dark' ? '☀️' : '🌙';
      if (btnText) btnText.textContent = next === 'dark' ? 'Light' : 'Dark';
    }
  </script>
{% endblock %}