{% extends "../base.html" %}
{% load django_vite %}
{% load i18n %}
{% load static %}

{% block title %}{% translate "Styleguide" %}{% endblock title %}

{% block css %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'cast/css/styleguide.css' %}">
{% endblock css %}

{% block content %}
  {% include "cast/styleguide/layout.html" %}
  {# Keep a single live search modal host on the styleguide page. #}
  {% include "cast/bootstrap5/_search_modal.html" with page=blog filterset=filterset %}

  {# Dark Mode Toggle for Styleguide #}
  {% if not request.GET.nav_preview and not request.GET.nav_layout %}
    <div class="cast-styleguide-color-mode position-fixed bottom-0 end-0 mb-3 me-3" style="z-index: 1050;">
      <div class="dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{% translate "Toggle color mode" %}" id="styleguideColorModeToggle">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16" id="styleguide-theme-icon-light" style="display: none;">
            <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16" id="styleguide-theme-icon-dark" style="display: none;">
            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16" id="styleguide-theme-icon-auto" style="display: none;">
            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
          </svg>
          <span class="d-none d-sm-inline" id="styleguide-theme-label">Auto</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-styleguide-theme-value="light">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-2" viewBox="0 0 16 16">
                <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
              </svg>
              {% translate "Light" %}
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi ms-auto check-icon d-none" viewBox="0 0 16 16">
                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
              </svg>
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-styleguide-theme-value="dark">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-2" viewBox="0 0 16 16">
                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
              </svg>
              {% translate "Dark" %}
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi ms-auto check-icon d-none" viewBox="0 0 16 16">
                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
              </svg>
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-styleguide-theme-value="auto">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-2" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
              </svg>
              {% translate "Auto" %}
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi ms-auto check-icon d-none" viewBox="0 0 16 16">
                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
              </svg>
            </button>
          </li>
        </ul>
      </div>
    </div>
  {% endif %}

  <script>
    (function() {
      'use strict';

      var STORAGE_KEY = 'cast-theme';
      var labels = { light: '{% translate "Light" as light_label %}{{ light_label|escapejs }}', dark: '{% translate "Dark" as dark_label %}{{ dark_label|escapejs }}', auto: '{% translate "Auto" as auto_label %}{{ auto_label|escapejs }}' };

      function getStoredTheme() {
        try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; }
      }

      function setStoredTheme(theme) {
        try { localStorage.setItem(STORAGE_KEY, theme); } catch (e) { /* ignore */ }
      }

      function getPreferredTheme() {
        var stored = getStoredTheme();
        if (stored) return stored;
        return 'auto';
      }

      function getActualTheme(theme) {
        if (theme === 'auto') {
          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        return theme;
      }

      function setTheme(theme) {
        var actualTheme = getActualTheme(theme);
        document.documentElement.setAttribute('data-bs-theme', actualTheme);
        updateIcons(theme);
        updateActiveItem(theme);
        updateLabel(theme);
      }

      function updateIcons(theme) {
        var lightIcon = document.getElementById('styleguide-theme-icon-light');
        var darkIcon = document.getElementById('styleguide-theme-icon-dark');
        var autoIcon = document.getElementById('styleguide-theme-icon-auto');

        if (lightIcon) lightIcon.style.display = 'none';
        if (darkIcon) darkIcon.style.display = 'none';
        if (autoIcon) autoIcon.style.display = 'none';

        if (theme === 'light' && lightIcon) {
          lightIcon.style.display = 'inline';
        } else if (theme === 'dark' && darkIcon) {
          darkIcon.style.display = 'inline';
        } else if (theme === 'auto' && autoIcon) {
          autoIcon.style.display = 'inline';
        }
      }

      function updateActiveItem(theme) {
        var buttons = document.querySelectorAll('[data-styleguide-theme-value]');
        buttons.forEach(function(btn) {
          var btnTheme = btn.getAttribute('data-styleguide-theme-value');
          var checkmark = btn.querySelector('.check-icon');
          if (checkmark) {
            if (btnTheme === theme) {
              checkmark.classList.remove('d-none');
              btn.classList.add('active');
            } else {
              checkmark.classList.add('d-none');
              btn.classList.remove('active');
            }
          }
        });
      }

      function updateLabel(theme) {
        var label = document.getElementById('styleguide-theme-label');
        if (label && labels[theme]) {
          label.textContent = labels[theme];
        }
      }

    // Initialize
      var preferredTheme = getPreferredTheme();
      setTheme(preferredTheme);

      document.addEventListener('DOMContentLoaded', function() {
        var buttons = document.querySelectorAll('[data-styleguide-theme-value]');
        buttons.forEach(function(btn) {
          btn.addEventListener('click', function() {
            var theme = btn.getAttribute('data-styleguide-theme-value');
            setStoredTheme(theme);
            setTheme(theme);
          });
        });

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
          var storedTheme = getStoredTheme();
          if (!storedTheme || storedTheme === 'auto') {
            setTheme('auto');
          }
        });
      });
    })();
  </script>
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  {% vite_hmr_client app="cast-bootstrap5" %}
  {% vite_asset 'src/search/cast-search-modal.ts' app="cast-bootstrap5" %}
  {% vite_asset 'src/gallery/image-gallery-bs5.ts' app="cast-bootstrap5" %}
  {% vite_asset 'src/audio/podlove-player.ts' app="cast-bootstrap5" %}
{% endblock javascript %}