{% extends "base.html" %}

{% block title %}Showboat Document{% endblock %}

{% block extra_head %}
    <script src="{{ base_url }}-/static-plugins/datasette-showboat/marked.min.js"></script>
    <script src="{{ base_url }}-/static-plugins/datasette-showboat/purify.min.js"></script>
    <style>
        .showboat-pill,
        .showboat-pill:link,
        .showboat-pill:visited {
            display: inline-block;
            margin-top: 0.8em;
            margin-bottom: 1em;
            padding: 0.3em 0.8em;
            font-size: 0.85em;
            background: #f6f8fa;
            border: 1px solid #d0d7de;
            border-radius: 2em;
            text-decoration: none;
            color: #555;
        }
        .showboat-pill:hover,
        .showboat-pill:focus,
        .showboat-pill:active { background: #eaeef2; color: #333; text-decoration: none; }
        .chunk { margin-bottom: 0.5em; }
        .chunk-timestamp {
            font-size: 0.7em;
            color: #999;
            margin-bottom: 0.5em;
        }
        .chunk-content img { max-width: 100%; }
        .chunk-content pre:has(code.language-output) {
            background: #eef1f5;
            margin-top: -0.5em;
            padding-top: 1em;
        }
        .chunk-popped {
            opacity: 0.6;
        }
        .chunk-popped summary {
            cursor: pointer;
            font-size: 0.85em;
            color: #666;
            font-style: italic;
        }
    </style>
{% endblock %}

{% block content %}
    <a href="{{ base_url }}-/showboat" class="showboat-pill">&larr; All documents</a>
    <a href="{{ md_url }}" class="showboat-pill">Download .md</a>
    <div id="chunks"></div>
    <script>
    (function() {
        const uuid = {{ uuid|tojson }};
        const jsonUrl = {{ json_url|tojson }};
        let lastId = 0;
        const chunksDiv = document.getElementById("chunks");

        function renderChunk(chunk) {
            var div = document.createElement("div");
            div.className = "chunk";
            div.setAttribute("data-id", chunk.id);

            if (chunk.command === "pop") {
                var allChunks = chunksDiv.querySelectorAll(".chunk:not(.chunk-popped)");
                if (allChunks.length > 0) {
                    var target = allChunks[allChunks.length - 1];
                    target.classList.add("chunk-popped");
                    var originalContent = target.innerHTML;
                    target.innerHTML = "<details><summary>deleted</summary>" + originalContent + "</details>";
                }
                return;
            }

            var content = document.createElement("div");
            content.className = "chunk-content";
            var md = chunk.rendered_markdown || "";
            if (chunk.image_url) {
                if (md.match(/!\[[^\]]*\]\(\)/)) {
                    md = md.replace(/!\[([^\]]*)\]\(\)/, "![$1](" + chunk.image_url + ")");
                } else {
                    md += "\n\n![image](" + chunk.image_url + ")";
                }
            }
            content.innerHTML = DOMPurify.sanitize(marked.parse(md));

            var ts = document.createElement("div");
            ts.className = "chunk-timestamp";
            var date = new Date(chunk.created_at);
            ts.textContent = date.toLocaleString();

            div.appendChild(content);
            div.appendChild(ts);
            chunksDiv.appendChild(div);
        }

        async function poll() {
            try {
                var url = jsonUrl + (lastId ? "?after=" + lastId : "");
                var response = await fetch(url);
                if (!response.ok) return;
                var data = await response.json();
                if (data.chunks && data.chunks.length > 0) {
                    data.chunks.forEach(function(chunk) {
                        renderChunk(chunk);
                        if (chunk.id > lastId) lastId = chunk.id;
                    });
                }
            } catch (e) {
                console.error("Poll error:", e);
            }
        }

        poll();
        setInterval(poll, 2000);
    })();
    </script>
{% endblock %}
