<div id="lightboxModal" class="lightbox-modal">
    <!-- Left Arrow -->
    <button id="prevBtn" class="lightbox-arrow prev"><i class="las la-angle-left px-1"></i></button>

    <img class="lightbox-content" id="lightboxImage">

    <!-- Right Arrow -->
    <button id="nextBtn" class="lightbox-arrow next"><i class="las la-angle-right px-1"></i></button>

    <!-- Toolbar (split left & right) -->
    <div class="lightbox-toolbar">
        <div class="toolbar-left">
            <span id="imageCounter"></span>
        </div>
        <div class="toolbar-right">
            <button id="zoomInBtn"><i class="las la-search-plus"></i></button>
            <button id="zoomOutBtn"><i class="las la-search-minus"></i></button>
            <button id="fullscreenBtn">⛶</button>
            <button id="copyLinkBtn"><i class="las la-copy"></i></button>
            <button id="downloadBtn"><i class="las la-download"></i></button>
            <button class="lightbox-close"><i class="las la-times"></i></button>
        </div>
    </div>
</div>