{{!< default}}

<!-- Blog Header -->
<header class="blog-header {{#if @site.cover_image}} has-cover{{/if}}">
    <div class="inner">
        <!-- Back to Content Index Button -->
        <a href="/content_index" class="back-button">Back to Content Index</a>
        <div class="box blog-box">
            <h1 class="blog-name">{{@site.title}}</h1>
            {{#if @site.description}}
            <span class="blog-description">{{@site.description}}</span>
            {{/if}}
        </div>
    </div>
</header>

<!-- Index Page Content -->
<div id="index" class="container">
    <main class="content" role="main">
        <div class="layout-wrapper">
            <div class="content-section">
                {{#get "posts" order="published_at asc" limit="all"}}
                    {{#foreach posts}}
                    <article id="{{slug}}" class="{{post_class}}">
                        <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}}}
                                    </div>
                                </div>
                            </div>
                            <div class="post-image-section {{@config.custom.post_image_style}}">
                                <!-- Images will be moved here by JavaScript -->
                            </div>
                        </div>
                    </article>
                    {{/foreach}}
                {{/get}}
            </div>
        </div>
    </main>
</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>
    <button id="change-color">Change Color</button>
    <input type="color" id="color-picker" style="display: none;">
</div>

<!-- Page Wrapper for Text Content -->
<section class="page-wrapper">
    <div class="hidden-custom-variable">{{@custom.post_share}}</div>
    <div id="overlay" class="overlay"></div>
    <div id="toolbar" class="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="toggleFormattingButton">Toggle Formatting</button>
    </div>
    <div class="content">
        {{{body}}}
    </div>
</section>

{{ghost_foot}}