<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="base-url" content="{{ baseUrl }}">
    <title>{{ title }} - Prompt Library</title>
    <link rel="stylesheet" href="{{ baseUrl }}/assets/css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="{{ baseUrl }}/assets/js/theme.js"></script>
</head>
<body>
    <header>
        <nav>
            <a href="{{ baseUrl }}/" class="home-link"><i class="fas fa-book-open"></i> Home</a>
            <a href="{{ baseUrl }}/help" class="home-link"><i class="fas fa-question-circle"></i> Help</a>
            <div class="search-container">
                <form class="search-form" role="search">
                    <label for="search-input" class="visually-hidden">Search</label>
                    <input 
                        type="search" 
                        id="search-input" 
                        class="search-input" 
                        placeholder="Search prompts, rules, and configurations..."
                        aria-label="Search content"
                    >
                    <button type="submit" class="search-button" aria-label="Search">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                <div id="search-results" class="search-results" hidden></div>
            </div>
            <a href="https://github.com/Lullabot/prompt_library" class="theme-toggle" aria-label="GitHub Repository" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-github"></i>
            </a>
            <button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Switch theme">
                <i class="fas fa-moon"></i>
            </button>
        </nav>
    </header>

    <main>
        {{ content | safe }}
    </main>

    <footer>
        <p>&copy; {{ "now" | date("yyyy") }} Prompt Library</p>
    </footer>

    <div id="markdown-modal" class="markdown-modal">
        <div class="markdown-content">
            <button class="close-button" aria-label="Close">&times;</button>
            <div id="markdown-display" class="markdown-body"></div>
        </div>
    </div>

    <script src="{{ baseUrl }}/assets/js/main.js"></script>
</body>
</html> 