<!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>
  {% 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>
          {% 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>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      {% block content %}{% endblock %}
    </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');
      });
    });
  </script>
</body>

</html>
