<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>{% block title %}Cipher Shield{% endblock %}</title>
  {% if project_description %}
  <meta name="description" content="{{ project_description }}">
  <meta property="og:description" content="{{ project_description }}">
  <meta property="twitter:description" content="{{ project_description }}">
  {% endif %}
  {% if project_image_url %}
  <meta property="og:image" content="{{ project_image_url }}">
  <meta property="twitter:image" content="{{ project_image_url }}">
  {% endif %}
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  {% block head %}{% endblock %}
</head>

<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <a href="{% url 'landing_page' %}" class="font-bold text-xl">Cipher Shield</a>
        </div>
        <div class="flex items-center">
          <a href="{% url 'post_list' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Blog</a>
          <div class="relative inline-block text-left">
            <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="false">
              Tools
              <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
              <div class="py-1" role="none">
                <a href="{% url 'image_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Image Generator</a>
                <a href="{% url 'ad_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Ad Generator</a>
                <a href="{% url 'ai_chat' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">AI Chat</a>
                <a href="{% url 'graphics_editor' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Graphics Editor</a>
              </div>
            </div>
          </div>
          <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 ml-2">
            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
          </button>
          {% if user.is_authenticated %}
            <a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a>
            <a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a>
          {% else %}
            <a href="{% url 'login' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Login</a>
            <a href="{% url 'signup' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">Sign Up</a>
          {% endif %}
        </div>
      </div>
    </div>
  </nav>
  <main class="container mx-auto mt-4 px-4">
    <div class="flex flex-col lg:flex-row gap-4">
      <aside class="lg:w-1/4">
        <div class="glass-card p-4 h-full">
          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
          <ul>
            <li class="mb-2"><a href="{% url 'ai_chat' %}" class="hover:text-blue-500">AI Chat</a></li>
            <li class="mb-2"><a href="{% url 'image_generator' %}" class="hover:text-blue-500">Image Generator</a></li>
            <li class="mb-2"><a href="{% url 'ad_generator' %}" class="hover:text-blue-500">Ad Generator</a></li>
            <li class="mb-2"><a href="{% url 'graphics_editor' %}" class="hover:text-blue-500">Graphics Editor</a></li>
            <li class="mb-2"><a href="{% url 'post_list' %}" class="hover:text-blue-500">Blog</a></li>
            {% if user.is_authenticated %}
            <li class="mb-2"><a href="{% url 'post_create' %}" class="hover:text-blue-500">Create Post</a></li>
            <li class="mb-2"><a href="{% url 'logout' %}" class="hover:text-blue-500">Logout</a></li>
            {% else %}
            <li class="mb-2"><a href="{% url 'login' %}" class="hover:text-blue-500">Login</a></li>
            <li class="mb-2"><a href="{% url 'signup' %}" class="hover:text-blue-500">Sign Up</a></li>
            {% endif %}
          </ul>
        </div>
      </aside>
      <section class="lg:w-3/4">
        {% block content %}{% endblock %}
      </section>
    </div>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('options-menu');
      const menu = document.querySelector('[aria-labelledby="options-menu"]');

      menuButton.addEventListener('click', function() {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', !isExpanded);
        menu.classList.toggle('hidden');
      });

      // Theme toggle logic
      const themeToggleBtn = document.getElementById('theme-toggle');
      const lightIcon = document.getElementById('theme-toggle-light-icon');
      const darkIcon = document.getElementById('theme-toggle-dark-icon');
      const htmlElement = document.documentElement;

      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
      if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        htmlElement.classList.add('dark');
        darkIcon.classList.remove('hidden');
        lightIcon.classList.add('hidden');
      } else {
        htmlElement.classList.remove('dark');
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
      }

      themeToggleBtn.addEventListener('click', function() {
        if (htmlElement.classList.contains('dark')) {
          htmlElement.classList.remove('dark');
          localStorage.setItem('theme', 'light');
          lightIcon.classList.remove('hidden');
          darkIcon.classList.add('hidden');
        } else {
          htmlElement.classList.add('dark');
          localStorage.setItem('theme', 'dark');
          darkIcon.classList.remove('hidden');
          lightIcon.classList.add('hidden');
        }
      });
    });
  </script>
</body>

</html>
