{{ define "main" }}

        {{ partial "blog.html" . }}

        {{ partial "music.html" . }}

        {{ partial "pictures.html" . }}

        {{ partial "videos.html" . }}

        <!-- Custom Lightbox -->
    <div class="custom-lightbox" id="customLightbox">
        <span class="custom-lightbox-close" id="lightboxClose">✕</span>
        <button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
        <button class="custom-lightbox-next" id="lightboxNext">›</button>
        <div class="custom-lightbox-content">
            <img id="lightboxImage" src="" alt="">
            <div class="custom-lightbox-caption">
                <span id="lightboxCaption"></span>
                <span class="lightbox-meta" id="lightboxMeta"></span>
            </div>
        </div>
        <div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
    </div>

    <!-- Music Lightbox -->
    <div class="music-lightbox" id="musicLightbox">
        <div class="music-lightbox-background" id="musicLightboxBg"></div>
        <button class="music-lightbox-close" id="musicLightboxClose">✕</button>

        <div class="music-lightbox-content">
            <div class="music-lightbox-album-art">
                <img id="musicLightboxImage" src="" alt="Album art">
            </div>

            <div class="music-lightbox-info">
                <h2 id="musicLightboxTitle">Title</h2>
                <p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
                <p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>

                <div class="music-lightbox-progress">
                    <span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
                    <div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
                        <div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
                    </div>
                    <span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
                </div>

                <div class="music-lightbox-controls">
                    <button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
                    <button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
                        <span id="musicPlayIcon2">▶</span>
                    </button>
                    <button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
                </div>

                <!-- SHARE BUTTON - -->
                <div class="music-lightbox-share-row">
                    <button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
                        <span class="share-icon">🔗</span>
                        <span class="share-label">Share</span>
                    </button>
                </div>

                <!-- Lyrics -->
                <div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
            </div>
        </div>
    </div>

{{ end }}