{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/user-pages.css"}}">


<div class="card">
    <div class="card-body">
        <div class="user-page-head mb-3">
            <div class="user-page-head-main">
                <h5 class="mb-0">{{T "user_doc_preview_title"}}</h5>
            </div>
            <div class="user-page-head-actions">
                <button type="button" class="btn btn-danger btn-sm" onclick="window.close()">
                    <i class='bx bx-x'></i> {{T "user_btn_close"}}
                </button>
            </div>
        </div>

        <div class="doc-preview-banner" id="previewBanner">
            <i class='bx bx-info-circle'></i>
            <span>{{T "user_doc_preview_banner"}}</span>
        </div>

        <div id="previewEmpty" class="doc-preview-empty d-none">
            <i class='bx bx-file-blank d-block mb-2' style="font-size:2rem;opacity:.45;"></i>
            <span>{{T "user_doc_preview_load_failed"}}</span>
        </div>

        <article class="doc-preview-article d-none" id="previewArticle">
            <h1 id="previewTitle"></h1>
            <p class="doc-preview-desc d-none" id="previewDesc"></p>
            <div class="article-content" id="articleContent">
                <div class="article-content-rendered" id="previewBody"></div>
            </div>
        </article>
    </div>
</div>

<button id="docPreviewScrollToTop" class="scroll-to-top" type="button" title="{{T "user_scroll_to_top"}}" aria-label="{{T "user_scroll_to_top"}}" style="display: none;">
    <i class='bx bx-chevron-up'></i>
</button>
{{end}}

{{define "scripts"}}
<script src="{{asset "/static/js/mermaid.min.js"}}"></script>
<script src="{{asset "/template/default/assets/js/mermaid-render.js"}}"></script>
<script src="{{asset "/template/default/assets/js/markdown-render.js"}}"></script>
<script>
(function() {
    var previewKey = {{json .Data.PreviewKey}};
    var defaultTitle = {{json (T "user_doc_preview_untitled")}};

    function initScrollToTop() {
        var btn = document.getElementById('docPreviewScrollToTop');
        if (!btn) return;
        window.addEventListener('scroll', function() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            btn.style.display = scrollTop > 300 ? 'flex' : 'none';
        }, { passive: true });
        btn.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    function showEmpty() {
        $('#previewBanner').addClass('d-none');
        $('#previewArticle').addClass('d-none');
        $('#previewEmpty').removeClass('d-none');
    }

    $(function() {
        initScrollToTop();
        if (!previewKey) {
            showEmpty();
            return;
        }
        var raw = null;
        try {
            raw = localStorage.getItem(previewKey);
            if (!raw) {
                raw = sessionStorage.getItem(previewKey);
            }
        } catch (e) {
            showEmpty();
            return;
        }
        if (!raw) {
            showEmpty();
            return;
        }
        var payload = null;
        try {
            payload = JSON.parse(raw);
        } catch (e) {
            showEmpty();
            return;
        }
        var content = (payload && payload.content) ? String(payload.content) : '';
        if (!content.trim()) {
            showEmpty();
            return;
        }
        var title = (payload.title || '').trim() || defaultTitle;
        var description = (payload.description || '').trim();
        $('#previewTitle').text(title);
        if (description) {
            $('#previewDesc').text(description).removeClass('d-none');
        }
        if (typeof stripDuplicateMarkdownH1 === 'function') {
            content = stripDuplicateMarkdownH1(content, title);
        }
        if (typeof simpleMarkdownToHtml === 'function') {
            $('#previewBody').html(simpleMarkdownToHtml(content));
        } else {
            $('#previewBody').text(content);
        }
        $('#previewBody img').each(function() {
            var alt = (this.getAttribute('alt') || '').trim();
            if (alt && !this.getAttribute('title')) {
                this.setAttribute('title', alt);
            }
        });
        if (typeof initMermaidDiagrams === 'function') {
            initMermaidDiagrams();
        }
        $('#previewArticle').removeClass('d-none');
        document.title = title + ' - ' + document.title.split(' - ').slice(-1)[0];
    });
})();
</script>
{{end}}