<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="color-scheme" content="dark">
        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✅</text></svg>">
        <title>{{ title }}</title>
        <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=Fira+Mono:wght@400;500;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: "Open Sans", sans-serif;
            }
            .run-output {
                font-family: "Fira Mono", monospace;
            }
            * {
                scrollbar-width: thin;
                scrollbar-color: #928374 #2e2c2c;
            }
            *::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            *::-webkit-scrollbar-track {
                background: #282828;
            }
            *::-webkit-scrollbar-thumb {
                background: #a594f940;
                border-radius: 4px;
            }
        </style>
    </head>
    <body class="bg-[#282828] overflow-y-scroll">
        <div class="w-4/5 max-sm:w-full max-sm:px-4 mx-auto min-h-screen pt-8">
            <div class="flex flex-col gap-2">
                <h1 class="text-[#fbf1c7] text-3xl font-semibold">{{ title }}</h1>
                <p class="text-[#928374] italic">Generated at {{ timestamp }}</p>
            </div>
            {%- if runs | length > 0 %}
            <div class="overflow-x-auto pt-4">
                <div class="flex gap-4 items-center pb-2">
                    <button class="bg-[#83a598] text-[#282828] font-semibold text-xs p-2 hover:bg-[#fabd2f] cursor-pointer" onclick="toggleAllDetails()">
                    Toggle All
                    </button>
                </div>
                {%- for run in runs %}
                <div class="my-2 overflow-x-auto">
                    <details>
                        <summary class="text-[#83a598] cursor-pointer max-sm:text-sm mb-2">
                            {{ run.label }}
                        </summary>
                        <div class="max-sm:p-2 p-4 bg-[#2e2c2c] run-output max-sm:text-xs text-sm">
                            <pre class="run-output text-[#b8bb26] overflow-x-auto max-sm:text-xs text-sm">{{ run.contents }}</pre>
                        </div>
                    </details>
                </div>
                {%- endfor %}
            </div>
            {%- else %}
            <p class="text-[#928374] mt-4">No runs found yet.</p>
            {%- endif %}
            <p class="text-[#928374] italic my-10 pt-2 border-t-2 border-[#92837433]">Built using <a class="font-bold" href="https://github.com/dhth/mrj" target="_blank" rel="noopener noreferrer">mrj</a></p>
        </div>
        <button id="scrollToTop" onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
            class="hidden fixed bottom-4 left-4 z-50 bg-[#928374] text-[#282828] px-4 py-2 rounded-full shadow-lg hover:bg-[#d3869b] font-bold transition">
        ↑
        </button>
        <script>
            const scrollToTopButton = document.getElementById("scrollToTop");
            let allDetailsOpen = false;
            
            function toggleAllDetails() {
                allDetailsOpen = !allDetailsOpen;
                document.querySelectorAll("details").forEach((detail) => {
                    detail.open = allDetailsOpen;
                });
            }
            
            window.addEventListener("scroll", function () {
                if (window.scrollY > 100) {
                    scrollToTopButton.classList.remove("hidden");
                } else {
                    scrollToTopButton.classList.add("hidden");
                }
            });
        </script>
    </body>
</html>
