{{!< default}}

<div id="postOverlay" class="overlay" style="display: none;">
    <div class="overlay-content">
        <span class="close-button">&times;</span>
        <div id="overlayContent" class="overlay-content-inner"></div>
    </div>
</div>

<button id="toggle-theme" class="theme-button">Toggle Theme</button>

<!-- Blog Header -->
<header class="blog-header {{#if @site.cover_image}} has-cover{{/if}}">
    <div class="inner">
        <a href="/content_index" class="back-button">
            <img src="{{asset "images/back_arrow_2.svg"}}" alt="Back Button" />
        </a>
    </div>
</header>

<!-- Sticky Menu Bar -->
<nav class="portal-menu">
    <ul>
        {{#get "posts" filter="tag:-prenos" order="published_at asc" limit="all"}}
            {{#foreach posts}}
            {{#if feature_image_caption}}
            <li>
                <a href="#{{slug}}" class="sh-scroll">
                    <div class="year-feature-image-caption">{{feature_image_caption}}</div>
                </a>
            </li>
            {{/if}}
            {{/foreach}}
        {{/get}}
    </ul>
</nav>

<div id="post-list" class="content-section">
    {{#get "posts" filter="tag:-prenos" order="published_at asc" limit="1" page=@pagination.page}}
        {{#foreach posts}}
            <article id="{{slug}}" class="{{post_class}}">
                <div class="before-image-section {{@config.custom.before_image_style}}">
                    <!-- PNG Images will be moved here by JavaScript -->
                </div>
                <div class="inner post-content-container">
                    <div class="post-text-section">
                        <div class="box post-box">
                            <h1 class="post-title"><a href="{{url}}">{{{title}}}</a></h1>
                            <div class="post-content">
                                {{{content}}}
                                <!-- Disqus Comments -->
                                <div id="disqus_thread"></div>
                            </div>
                        </div>
                    </div>
                    <div class="post-image-section sticky-container{{@config.custom.post_image_style}}">
                        <!-- Other images will be moved here by JavaScript -->
                    </div>
                {{#pagination}}
    {{#if pagination.prev}}
        <a href="{{page_url pagination.prev}}">Previous</a>
    {{/if}}

    {{#if pagination.next}}
        <a href="{{page_url pagination.next}}">Next</a>
    {{/if}}
{{/pagination}}

                </div>
            </article>
        {{/foreach}}
    {{/get}}

    <div id="loading-spinner" style="display: none;">Loading...</div>
</div>

 <div id="context-menu" style="display: none; position: absolute; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000;">
        <button id="delete-highlight">Delete</button>
</div>

<!-- Page Wrapper for Text Content -->
<section class="page-wrapper">
    <div class="hidden-custom-variable"></div>
    <div id="overlay" class="overlay"></div>
    <div id="toolbar" class="toolbar hidden-toolbar">
        <div id="toolbar-handle" class="toolbar-handle"></div>
        <button id="highlight" title="Highlight">{{> "icons/icon-highlight"}}</button>
        <button id="strikethrough" title="Strikethrough">{{> "icons/icon-strikethrough"}}</button>
        <button id="bold" title="Bold">{{> "icons/icon-bold"}}</button>
        <button id="italic" title="Italic">{{> "icons/icon-italic"}}</button>
        <button id="underline" title="Underline">{{> "icons/icon-underline"}}</button>
        <button id="link" title="Link">{{> "icons/icon-link"}}</button>
        <button id="unlink" title="Unlink">{{> "icons/icon-unlink"}}</button>
        <button id="clear-storage" title="Clear Storage">{{> "icons/icon-clear"}}</button>
        <button id="toggleAllFormatting">Toggle Formatting</button>
        <!-- Add export button -->
        <button id="export-pdf" title="Export as PDF">Export PDF</button>
    </div>
    <div id="show-toolbar-arrow" class="hidden-arrow show-arrow">&larr;</div>
    <div class="content">
        {{{body}}}
    </div>
</section>

<script>
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

const currentPage = getQueryParam('page') || 1;  // Default to 1 if no page is specified
console.log(`Current page is: ${currentPage}`);

</script>
{{!-- Scripts --}}
<script defer src="{{asset "js/toolbar.js"}}"></script>
<script defer src="{{asset "js/infinite-scroll.js"}}"></script>
<script defer src="{{asset "js/adjust_image.js"}}"></script>
<script defer src="{{asset "js/toggle_callout.js"}}"></script>
<script defer src="{{asset "js/lightbox.js"}}"></script>
<script defer src="{{asset "js/more.js"}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.4/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.0.3/docx.min.js"></script>
<script defer src="{{asset "js/menu_bar.js"}}"></script>
<script src="{{asset "js/content_index.js"}}"></script>
<script src="{{asset "js/pdf_export.js"}}"></script>
<script src="{{asset "js/toggle_theme.js"}}"></script>

{{ghost_foot}}