{{-- MODERN LAYOUT — 3-column grid --}}
{{-- Used by: guests (no session) + members with use_new_layout = true --}}
<div class="item-layout-container">

    {{-- LEFT SIDEBAR: comments + tags --}}
    <div class="item-sidebar-left">

        @if(enable_xd_score && item.xd_score > 0)
        <div class="xd-score-wrapper">
        <span class="xd-score-badge xd-tier-{{ item.xd_tier }}" tooltip="xD Score: {{ item.xd_score }} pts" flow="up">
            {{ item.xd_label }} <span class="xd-score-num">{{ item.xd_score }}</span>
        </span>
        </div>
        @endif

        @if(session || !hide_comments_from_public)
        <div id="comments-container"
             data-item-id="{{ item.id }}"
             @if(session) data-user="{{ session.user }}" @endif
             @if(session && is_mod_or_admin) data-is-admin="true" @endif
             @if(item.is_comments_locked) data-is-locked="true" @endif>
            @if(item.is_comments_locked && !is_mod_or_admin)
            <div class="lock-notice">🔒 Comments are disabled on this thread.</div>
            @elseif(session)
            <div class="comment-input main-input">
                <textarea disabled></textarea>
            </div>
            @else
            <div class="login-placeholder"><a href="/login" class="login-trigger-btn">Login</a> to comment</div>
            @endif
        </div>
        @endif

        @if(session)
        <div class="tag-controls">
            <a href="#" id="a_addtag" class="tag-btn" flow="up-left">
                <i class="fa-solid fa-plus"></i>
            </a>
        </div>
        @endif

        <div class="sidebar-tags-container">
            <span class="badge badge-dark" id="tags" data-can-manage="{{ can_manage_item ? 'true' : 'false' }}" style="display: flex; flex-wrap: wrap; gap: 5px; background: transparent; padding: 0; text-align: left; white-space: normal;">
                @if(!item.is_sfw && !item.is_nsfw && !item.is_nsfl)
                <span class="badge badge-untagged rating-tag is-untagged @if(can_manage_item) can-cycle @endif" data-rating="untagged">
                    <span class="rating-label">?</span>
                </span>
                @endif
                @if(typeof item.tags !== "undefined")
                @each(item.tags as tag)
                @if(tag.normalized === 'sfw' || tag.normalized === 'nsfw' || tag.normalized === 'nsfl')
                <span class="badge {{ tag.badge }} rating-tag is-{{ tag.normalized }} @if(can_manage_item) can-cycle @endif" data-rating="{{ tag.normalized }}">
                    <span class="rating-label">{!! tag.tag !!}</span>
                </span>
                @else
                <span @if(session && (tag.display_name || tag.user)) tooltip="{!! tag.display_name || tag.user !!}" @endif class="badge {{ tag.badge }}">
                    <a href="/tag/{{ tag.normalized }}">{!! tag.tag !!}</a>@if(is_mod_or_admin)&nbsp;<a class="removetag" href="#"><i class="fa-solid fa-xmark"></i></a>@endif
                </span>
                @endif
                @endeach
                @endif
            </span>
        </div>

        <button class="mobile-scroll-to-top" title="Back to top" aria-label="Scroll to top"><i class="fa-solid fa-chevron-up"></i></button>

    </div>

    {{-- MAIN CONTENT: media + navigation + metadata --}}
    <div class="item-main-content">

        <div class="_204863">
            <div class="location">{{ link.mainDisplay || link.main }}{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix }}</div>
            <div class="gapLeft"></div>
        </div>
        @if(enable_item_title)
        <div class="item_title">
            {!! item.title || '' !!}
            @if(can_manage_item)
            <div class="info-title-edit-wrap">
                <input type="text" id="info-title-input" class="info-title-input" value="{!! item.title || '' !!}" placeholder="Add a title…" maxlength="500" data-item-id="{{ item.id }}" />
                <button type="button" id="info-title-save" class="info-title-save-btn" title="Save Title"><i class="fa-solid fa-check"></i></button>
            </div>
            <span id="info-title-status" class="info-title-status" style="display:none"></span>
            @endif
        </div>
        @endif

        <div class="content">
            <div class="previous-post">
                @if(pagination.next)
                <div class="arrow-prev">
                    <a id="prev" href="{{ link.main }}{{ pagination.next }}{{ link.suffix }}"></a>
                </div>
                @else
                <div class="arrow-prev">
                    <a id="prev" href="#" style="color: #ccc !important;"></a>
                </div>
                @endif
            </div>
            <div class="media-object" data-mode="@if(item.is_nsfl)nsfl@elseif(item.is_nsfw)nsfw@elseif(item.is_sfw)sfw@elseuntagged@endif">
                @include(snippets/item-media)
            </div>
            <div class="next-post">
                @if(pagination.prev)
                <div class="arrow-next">
                    <a id="next" href="{{ link.main }}{{ pagination.prev }}{{ link.suffix }}"></a>
                </div>
                @else
                <div class="arrow-next">
                    <a id="next" href="#" style="color: #ccc !important;"></a>
                </div>
                @endif
            </div>
        </div>

        <div class="metadata">
            <div class="kontrollelement">
                <div class="einheit">
                    @if(typeof pagination !== "undefined")
                    <nav class="steuerung">
                        @if(pagination.next)
                        <a class="nav-prev" href="{{ link.main }}{{ pagination.next }}{{ link.suffix }}">← {{ t('nav.prev') }}</a>
                        @else
                        <a class="nav-prev" href="#" style="visibility: hidden">← {{ t('nav.prev') }}</a>
                        @endif
                        <span>|</span>
                        <a id="random" class="" href="/random">
                            <span>{{ t('nav.random_nav') }}</span>
                        </a>
                        <span>|</span>
                        @if(pagination.prev)
                        <a class="nav-next" href="{{ link.main }}{{ pagination.prev }}{{ link.suffix }}">{{ t('nav.next') }} →</a>
                        @else
                        <a class="nav-next" href="#" style="visibility: hidden">{{ t('nav.next') }} →</a>
                        @endif
                    </nav>
                    @endif
                </div>
            </div>
            <div class="blahlol">
                <span class="badge badge-dark">
                    <a href="/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}" class="id-link" data-item-id="{{ item.id }}">{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}</a> — [@if(session || !guest_anonymize)<a id="a_username" data-username="{{ item.username || '' }}" @if(session) data-author-id="{{ item.author_id || '' }}" @endif href="/user/{{ item_username_lower }}" @if(session && item.author_id) tooltip="ID: {{ item.author_id }}" @endif @if(item.author_color) style="color: {{ item.author_color }}" @endif>{!! item.author_display_name || item.username || 'unknown' !!}</a>@else<span>anonymous</span>@endif] <span id="oc-badge-container">@if(item.is_oc) — <span class="oc-badge" tooltip="Original Content">OC</span>@endif</span>
                </span>
                <span id="hall-badge-container">@if(halls_enabled && item.primaryHall)<span class="badge hall-badge-wrap">
                    <a href="/h/{{ item.primaryHall.slug }}" class="hall-badge-primary"><i class="fa-solid fa-layer-group"></i> {{ item.primaryHall.name }}</a>@if(item.otherHalls && item.otherHalls.length)<span class="hall-overflow-pill">+{{ item.otherHalls.length }}<span class="hall-overflow-tooltip">@each(item.otherHalls as oh)<a href="/h/{{ oh.slug }}">{{ oh.name }}</a>@endeach</span></span>@endif
                </span>@endif</span>
                <span class="badge badge-dark"><a href="/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}" class="timestamp-link"><time class="timeago" tooltip="{{ item.timestamp.timefull }}">{{item.timestamp.timeago }}</time></a></span>
                @if(item.expires_at)
                — <span class="badge badge-warning" style="background: rgba(255, 170, 0, 0.2); color: #ffaa00; border: 1px solid rgba(255, 170, 0, 0.4);" tooltip="Self-destructs {{ item.expires_in }}" flow="up"><i class="fa-solid fa-clock"></i> Expiring ({{ item.expires_in }})</span>
                @endif


            <div class="gapRight">
                @if(session)
                @if(user_has_favorited)
                <i class="iconset fa-solid fa-heart" id="a_favo" data-item-id="{{ item.id }}" title="Favorite"></i>
                @else
                <i class="iconset fa-regular fa-heart" id="a_favo" data-item-id="{{ item.id }}" title="Favorite"></i>
                @endif
                <i class="iconset fa-solid fa-circle-info" id="a_info" data-item-id="{{ item.id }}" title="{{ t('info_modal.button_title') || 'Post & File Info' }}"></i>
                <i class="iconset {{ isSubscribed ? 'fa-solid' : 'fa-regular' }} fa-bell" id="subscribe-btn" data-item-id="{{ item.id }}" title="{{ isSubscribed ? 'Subscribed' : 'Subscribe' }}"></i>
                <i class="iconset fa-solid fa-triangle-exclamation report-item-btn" data-item-id="{{ item.id }}" title="Report this post"></i>
                @if(can_manage_item)
                <i class="iconset {{ item.is_oc ? 'fa-solid' : 'fa-regular' }} fa-star" id="a_oc" data-item-id="{{ item.id }}" data-is-oc="{{ item.is_oc }}" title="{{ item.is_oc ? 'Remove OC status' : 'Mark as OC' }}"></i>
                <i class="iconset fa-solid fa-magic" id="a_metadata" data-item-id="{{ item.id }}" @if(item.mime === 'video/youtube') data-src="https://www.youtube.com/watch?v={{ item.dest.replace('yt:', '') }}" @endif title="Extract Metadata"></i>
                @if(is_flash_item)
                <i class="iconset fa-solid fa-image" id="a_rethumb" data-item-id="{{ item.id }}" title="Re-upload Thumbnail"></i>
                @endif
                @endif
                @if(halls_enabled)
                <i class="iconset fa-solid fa-layer-group" id="a_hall" data-item-id="{{ item.id }}" data-halls="{{ halls_slugs }}" data-user-halls="{{ user_halls_slugs }}" data-current-hall="{{ current_hall_slug }}" data-current-user-hall="{{ current_user_hall_slug }}" data-current-user-hall-owner="{{ current_user_hall_owner }}" title="Add to Hall"></i>
                @endif
                @if(is_mod_or_admin)
                <i class="iconset fa-solid fa-thumbtack{{ item.is_pinned ? ' active' : '' }}" id="a_pin" data-pinned="{{ item.is_pinned }}" title="{{ item.is_pinned ? 'Unpin from main' : 'Pin to main' }}"></i>
                <i class="iconset fa-solid fa-xmark" id="a_delete" title="Delete"></i>
                @endif
                @else
                <i class="iconset fa-solid fa-circle-info" id="a_info" data-item-id="{{ item.id }}" title="{{ t('info_modal.button_title') || 'Post & File Info' }}"></i>
                @endif
            </div>
                <span id="favs" @if(!item.favorites.length) hidden@endif style="margin-top: 5px;">
                    @each(item.favorites as fav)
                    @if(fav.hide_fav_badge && (!session || session.user !== fav.user))
                    <a class="ghost-fav" tooltip="?" flow="up" style="cursor: default;"><img src="/s/img/ghost_fav.svg" style="height: 32px; width: 32px;" loading="lazy" /></a>
                    @elseif(!session && guest_anonymize)
                    <a class="ghost-fav" tooltip="anonymous" flow="up" style="cursor: default;"><img src="/a/default.png" style="height: 32px; width: 32px;" loading="lazy" /></a>
                    @else
                    <a href="/user/{{ fav.user.toLowerCase() }}" tooltip="{!! fav.display_name || fav.user !!}" flow="up"><img src="@if(fav.avatar_file)/a/{{ fav.avatar_file }}@elseif(fav.avatar)/t/{{ fav.avatar }}.webp@else/a/default.png@endif" style="height: 32px; width: 32px@if(fav.username_color); border-color: {{ fav.username_color }}@endif" loading="lazy" /></a>
                    @endif
                    @endeach
                </span>

            </div>
        </div>

        <script id="initial-subscription" type="application/json">{{ isSubscribed }}</script>
    </div>

    {{-- RIGHT SIDEBAR: recent activity --}}


</div>

@include(snippets/info-modal)


<div id="visibility-modal" class="modal-overlay" style="display: none;">
    <div class="modal-content" style="max-width: 420px;">
        <div class="modal-header" style="margin-bottom: 15px; border-bottom: 1px solid var(--border-color, #333); padding-bottom: 10px;">
            <h3 style="margin: 0; font-size: 1.1em; color: var(--text-color, #fff);"><i class="fa-solid fa-eye"></i> Change Visibility</h3>
        </div>
        <div class="modal-body" style="padding: 10px 0; text-align: left;">
            <form id="visibility-form" onsubmit="return false;">
                <input type="hidden" id="visibility-item-id" value="{{ item.id }}" />
                <div class="visibility-options" style="display: flex; flex-direction: column; gap: 10px;">
                    <label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
                        <input type="radio" name="visibility" value="0" style="margin-top: 3px;" />
                        <div>
                            <strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-globe"></i> Public</strong>
                            <span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Visible to everyone in main feeds, search, and rankings.</span>
                        </div>
                    </label>
                    <label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
                        <input type="radio" name="visibility" value="1" style="margin-top: 3px;" />
                        <div>
                            <strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-link"></i> Unlisted</strong>
                            <span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Hidden from main feeds; accessible only via direct link or slug.</span>
                        </div>
                    </label>
                    <label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
                        <input type="radio" name="visibility" value="2" style="margin-top: 3px;" />
                        <div>
                            <strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-lock"></i> Private</strong>
                            <span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Only visible to you and site moderators.</span>
                        </div>
                    </label>
                </div>
            </form>
        </div>
        <div class="modal-actions" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
            <button class="btn-secondary" id="visibility-modal-cancel">Cancel</button>
            <button class="btn-primary" id="visibility-modal-save">Save Visibility</button>
        </div>
    </div>
</div>