{% load static %}
{% load i18n %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="{{ SITE_DESCRIPTION }}" />
    <meta name="keywords" content="{{ SITE_KEYWORDS }}" />
    <meta name="author" content="{{ SITE_AUTHOR }}" />

    <link rel="stylesheet" href="{% static 'css/styles.css' %}" type="text/css" nonce="{{request.csp_nonce}}">
    <style nonce="{{request.csp_nonce}}">
      .alert {
        border-radius: 0;
      }
      .group:hover .group-hover\:block {
        display: block;
      }
      body {
        font-family: 'Roboto', sans-serif;
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Roboto Mono', monospace;
      }
      pre, code {
        font-family: 'Roboto Mono', monospace;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
      }
      .link {
        color: #0070f3;
        text-decoration: none;
      }
      .link:hover {
        text-decoration: underline;
      }
    </style>

    <title>{{ SITE_NAME }}</title>

    <!-- Custom Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet" nonce="{{request.csp_nonce}}">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" nonce="{{request.csp_nonce}}"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" nonce="{{request.csp_nonce}}"></script>
    <![endif]-->
  </head>
  <body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
    <nav class="bg-white dark:bg-gray-800 shadow-lg py-4">
      <div class="container mx-auto flex items-center justify-between">
        <a class="text-2xl font-bold" href="/">{{ SITE_NAME }}</a>
        <div class="flex gap-4 space-x-6">
          <a target="_blank" href="{% url 'swagger-ui' %}" class="hover:font-semibold">API Docs Swagger UI</a>
          <a target="_blank" href="{% url 'redoc' %}" class="hover:font-semibold">API Docs Redoc</a>
        </div>
        <button id="dark-mode-toggle" class="focus:outline-none w-9">
          <span id="theme-toggle-text" class="text-2xl">Light</span>
        </button>
      </div>
    </nav>

    <div class="container mx-auto p-4">
      {% block content %}{% endblock %}
    </div>
  </body>
  <footer class="bg-white dark:bg-gray-800 shadow-lg py-4">
    <div class="container mx-auto flex items-center justify-between">
      <p class="text-sm">
        <a href="https://github.com/vasilistotskas/grooveshop-django-api" class="hover:underline">GitHub</a>
      </p>
      <p class="text-sm">{% trans "© 2024" %} {{ SITE_NAME }}. {% trans "All rights reserved." %}</p>
    </div>
    <script type="text/javascript" nonce="{{request.csp_nonce}}">
      document.addEventListener('DOMContentLoaded', function () {
        const themeToggleText = document.querySelector('#theme-toggle-text');
        const currentTheme = localStorage.getItem('theme');

        function updateThemeText(theme) {
          themeToggleText.textContent = theme === 'dark' ? '🌚' : '🌞';
          if (theme === 'dark') {
             document.documentElement.classList.add('dark');
             document.documentElement.classList.remove('light');
          } else {
             document.documentElement.classList.remove('dark');
             document.documentElement.classList.add('light');
          }
        }

        if (currentTheme) {
          document.documentElement.setAttribute('data-theme', currentTheme);
          updateThemeText(currentTheme);
        } else {
          updateThemeText('light');
        }

        document.querySelector('#dark-mode-toggle').addEventListener('click', function() {
          const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
          document.documentElement.setAttribute('data-theme', newTheme);
          localStorage.setItem('theme', newTheme);
          updateThemeText(newTheme);
        });
      });

      function error_response(data) {
          const apiResponse = document.querySelector('.api-response');
          if (data) {
            apiResponse.innerHTML = data
          }
      }

      function success_response(data) {
          const apiResponse = document.querySelector('.api-response');
          if (data) {
            apiResponse.innerHTML = data
          }
      }

      document.addEventListener('DOMContentLoaded', function() {
          const submitButtons = document.querySelectorAll('form.ajax-post button[type=submit]');
          const menu = document.getElementById('menu');

          if (menu) {
            menu.addEventListener('mouseleave', function() {
                menu.classList.add('hidden');
            });

            menu.addEventListener('mouseenter', function() {
              menu.classList.remove('hidden');
            });
          }

          if (!submitButtons) {
            return;
          }

          submitButtons.forEach(function(button) {
              button.addEventListener('click', function(event) {
                  event.preventDefault();
                  const form = button.closest('form');
                  const formData = new FormData(form);

                  const jsonData = {};
                  formData.forEach((value, key) => {
                      jsonData[key] = value;
                  });

                  const url = form.getAttribute('action');
                  const method = form.getAttribute('method');
                  const csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value;

                  const apiResponse = document.querySelector('.api-response');
                  apiResponse.innerHTML = "API Response: Loading...";

                  fetch(url, {
                      method: method,
                      headers: {
                          'Content-Type': 'application/json',
                          'X-CSRFToken': csrf_token,
                      },
                      body: JSON.stringify(jsonData),
                  })
                  .then(response => {
                      if (!response.ok) {
                          console.log('response', response)
                          throw new Error(response.statusText);
                      }
                      return response.json();
                  })
                  .then(data => {
                      console.log('data', data)
                      success_response(data);
                  })
                  .catch(error => {
                      console.log('error', error)
                      error_response(error);
                  });
              });
          });
      });
    </script>
    {% block script %}{% endblock %}
  </footer>
</html>
