<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %}Blog{% endblock %}</title>

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Custom Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    },
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Google Fonts -->
    <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&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <style>
        .prose {
            max-width: none;
        }
        .prose h1, .prose h2, .prose h3, .prose h4 {
            color: #1f2937;
            font-weight: 600;
        }
        .prose a {
            color: #3b82f6;
            text-decoration: none;
        }
        .prose a:hover {
            color: #2563eb;
            text-decoration: underline;
        }
    </style>

    {% block extra_css %}{% endblock %}

    <!-- SEO Meta Tags -->
    {% block meta_tags %}
        <meta name="description" content="{% block meta_description %}A modern blog built with Django and Tailwind CSS{% endblock %}">
        <meta name="keywords" content="{% block meta_keywords %}blog, django, tailwind, python{% endblock %}">

        <!-- Open Graph -->
        <meta property="og:type" content="website">
        <meta property="og:title" content="{% block og_title %}Blog{% endblock %}">
        <meta property="og:description" content="{% block og_description %}A modern blog built with Django and Tailwind CSS{% endblock %}">
        <meta property="og:site_name" content="Blog">

        <!-- Twitter Card -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="{% block twitter_title %}Blog{% endblock %}">
        <meta name="twitter:description" content="{% block twitter_description %}A modern blog built with Django and Tailwind CSS{% endblock %}">
    {% endblock %}
</head>
<body class="bg-gray-50 font-sans text-gray-800 antialiased">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b border-gray-200">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-3">
                    <a href="{% url 'blog:post_list' %}" class="flex items-center space-x-2 text-xl font-bold text-gray-900 hover:text-primary-600 transition-colors">
                        <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v2m0-2a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                        <span>Blog</span>
                    </a>
                </div>

                <!-- Navigation -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="{% url 'blog:post_list' %}" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">Home</a>
                    <a href="{% url 'blog:post_archive' %}" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">Archive</a>

                    <!-- Categories Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-600 hover:text-primary-600 font-medium transition-colors flex items-center">
                            Categories
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
                            {% load blog_tags %}
                            {% get_categories as categories %}
                            {% for category in categories %}
                                <a href="{{ category.get_absolute_url }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary-600 transition-colors">
                                    {{ category.name }}
                                </a>
                            {% empty %}
                                <span class="block px-4 py-2 text-sm text-gray-500">No categories</span>
                            {% endfor %}
                        </div>
                    </div>

                    <a href="{% url 'blog:post_search' %}" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">Search</a>
                </nav>

                <!-- Mobile menu button -->
                <button class="md:hidden p-2 rounded-md text-gray-600 hover:text-primary-600 hover:bg-gray-100 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="min-h-screen">
        {% block content_wrapper %}
        <div class="container mx-auto px-4 py-8">
            {% block breadcrumb %}{% endblock %}

            <!-- Messages -->
            {% if messages %}
                <div class="mb-6 space-y-3">
                    {% for message in messages %}
                        <div class="p-4 rounded-lg {% if message.tags == 'success' %}bg-green-50 text-green-800 border border-green-200{% elif message.tags == 'error' %}bg-red-50 text-red-800 border border-red-200{% elif message.tags == 'warning' %}bg-yellow-50 text-yellow-800 border border-yellow-200{% else %}bg-blue-50 text-blue-800 border border-blue-200{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            {% block content %}
            <!-- Main content goes here -->
            {% endblock %}
        </div>
        {% endblock %}
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Brand -->
                <div class="md:col-span-2">
                    <div class="flex items-center space-x-3 mb-4">
                        <svg class="w-8 h-8 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v2m0-2a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                        <span class="text-xl font-bold">Blog</span>
                    </div>
                    <p class="text-gray-300 max-w-md">
                        A modern blog built with Django and Tailwind CSS. Share your thoughts and connect with readers.
                    </p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="{% url 'blog:post_list' %}" class="text-gray-300 hover:text-white transition-colors">Home</a></li>
                        <li><a href="{% url 'blog:post_archive' %}" class="text-gray-300 hover:text-white transition-colors">Archive</a></li>
                        <li><a href="{% url 'blog:post_search' %}" class="text-gray-300 hover:text-white transition-colors">Search</a></li>
                    </ul>
                </div>

                <!-- Categories -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">Categories</h3>
                    <ul class="space-y-2">
                        {% load blog_tags %}
                        {% get_categories as categories %}
                        {% for category in categories|slice:":5" %}
                            <li><a href="{{ category.get_absolute_url }}" class="text-gray-300 hover:text-white transition-colors">{{ category.name }}</a></li>
                        {% empty %}
                            <li class="text-gray-400">No categories</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- Bottom Bar -->
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; {% now "Y" %} Blog. Built with Django & Tailwind CSS.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    {% block extra_js %}{% endblock %}

    <!-- Load template tags -->
    {% load blog_tags %}
</body>
</html>
