<!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>
  <div class="app-container">
    <aside>
      <h2 class="text-2xl font-poppins font-semibold mb-6">Cipher Shield</h2>
      <button id="theme-toggle" type="button" class="flex items-center justify-center p-2.5 mb-6 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">
        <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>
      <h3 class="text-lg font-semibold mb-4 text-text-primary">Navigation</h3>
      <ul>
        <li><a href="{% url 'landing_page' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.135-.439 1.576 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>Home</a></li>
        <li><a href="{% url 'ai_chat' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5m-4.5 0h7.5M12 10.5h.008v.008H12V10.5zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25h.008v.008H12V14.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>AI Chat</a></li>
        <li><a href="{% url 'image_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l1.5-1.5m1.5 1.5l1.5-1.5M2.25 15.75l3-3m-3 3l3 3m12 0l-3-3m3 3l-3 3m3-3l1.5-1.5m-1.5 1.5l1.5 1.5M19.5 15.75l1.5-1.5m-1.5 1.5l-1.5 1.5M4.5 12a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" /></svg>Image Generator</a></li>
        <li><a href="{% url 'ad_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>Ad Generator</a></li>
        <li><a href="{% url 'graphics_editor' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14.25v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>Graphics Editor</a></li>
        <li><a href="{% url 'post_list' %} "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12a2.25 2.25 0 01-2.25-2.25V6.75C9.75 6.129 10.254 5.625 10.875 5.625h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12M7.5 11.25h.008v.008H7.5V11.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Blog</a></li>
        {% if user.is_authenticated %}
        <li><a href="{% url 'post_create' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>Create Post</a></li>
        <li><a href="{% url 'logout' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Logout</a></li>
        {% else %}
        <li><a href="{% url 'login' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Login</a></li>
        <li><a href="{% url 'signup' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.5h.008v.008H16.75V6.75zm-3 0h.008v.008H13.75V6.75zm-3 0h.008v.008H10.75V6.75zm-3 0h.008v.008H7.75V6.75zm-3 0h.008v.008H4.75V6.75zM19 12a.75.75 0 01-.75.75H5.75a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h12.5c.414 0 .75.336.75.75v1.5zM6.75 20.25h.008v.008H6.75V20.25zm-3 0h.008v.008H3.75V20.25zm3-3h.008v.008H6.75V17.25zm-3 0h.008v.008H3.75V17.25zm3-3h.008v.008H6.75V14.25zm-3 0h.008v.008H3.75V14.25z" /></svg>Sign Up</a></li>
        {% endif %}
      </ul>
    </aside>
    <main class="flex-1 relative z-10">
      {% block content %}{% endblock %}
    </main>
  </div>
  {% block extra_scripts %}{% endblock %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 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>
