<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>marimo WebAssembly + GitHub Pages</title>
    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 font-sans">
    <div class="max-w-4xl mx-auto p-4">
        <!-- Header -->
        <header class="bg-gray-100 rounded-lg p-6 mb-8 text-center">
            <img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg"
                 alt="marimo Logo" class="w-20 h-auto mx-auto mb-3">
            <h1 class="text-2xl font-bold mb-2">marimo WebAssembly + GitHub Pages</h1>
            <p class="text-gray-600">Interactive Python notebooks exported to WebAssembly and deployed to GitHub Pages</p>
        </header>

        <!-- Main Content -->
        <main>
            {% if notebooks %}
                <section class="mb-8">
                    <h2 class="text-xl font-bold mb-2 text-center">HTML Notebooks</h2>
                    <p class="text-center text-gray-600 mb-4">Static html notebooks - you can not modify and experiment with the code</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        {% for notebook in notebooks %}
                            <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                                <div class="bg-blue-100 p-3 font-medium">{{ notebook.display_name }}</div>
                                <div class="p-4">
                                    <a href="{{ notebook.html_path }}" class="inline-block bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm no-underline transition">Open Notebook</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}

            {% if notebooks_wasm %}
                <section class="mb-8">
                    <h2 class="text-xl font-bold mb-2 text-center">Interactive Notebooks</h2>
                    <p class="text-center text-gray-600 mb-4">Interactive notebooks in edit mode - you can modify and experiment with the code</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        {% for notebook in notebooks_wasm %}
                            <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                                <div class="bg-green-100 p-3 font-medium">{{ notebook.display_name }}</div>
                                <div class="p-4">
                                    <a href="{{ notebook.html_path }}" class="inline-block bg-green-500 hover:bg-green-600 text-white py-1 px-3 rounded text-sm no-underline transition">Open Notebook</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}

            {% if apps %}
                <section class="mb-8">
                    <h2 class="text-xl font-bold mb-2 text-center">Apps</h2>
                    <p class="text-center text-gray-600 mb-4">Interactive applications in run mode - code is hidden for a clean user interface</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        {% for app in apps %}
                            <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                                <div class="bg-amber-100 p-3 font-medium">{{ app.display_name }}</div>
                                <div class="p-4">
                                    <a href="{{ app.html_path }}" class="inline-block bg-amber-500 hover:bg-amber-600 text-white py-1 px-3 rounded text-sm no-underline transition">Open App</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}
        </main>

        <!-- Footer -->
        <footer class="bg-gray-100 rounded-lg p-6 mt-8 text-center text-gray-600">
            <p class="mb-2">Built with <a href="https://marimo.io" target="_blank" class="text-blue-500 hover:underline">marimo</a> and <a href="https://jqr.ae" class="text-blue-500 hover:underline">jqr</a></p>
        </footer>
    </div>
</body>
</html>
