<div class="modal fade" id="displaysetModal" tabindex="-1" aria-labelledby="displaysetModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="displaysetModalLabel">Display Set Details</h5>
                <button type="button" class="btn btn-sm btn-outline-primary ms-2 displayset-fullscreen-btn" title="Open fullscreen">⤢</button>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="displaysetModalBody">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Fullscreen displayset modal: viewer left, details right -->
<div class="modal fade" id="displaysetFullscreenModal" tabindex="-1" aria-labelledby="displaysetFullscreenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content" style="height:100vh;">
            <div class="modal-header">
                <h5 class="modal-title" id="displaysetFullscreenModalLabel">Display Set — Fullscreen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" id="displaysetFullscreenBody">
                <div class="container-fluid h-100">
                    <div class="row g-0 h-100">
                        <div class="col-8" id="displaysetFullscreenLeft" style="height:100%; overflow:auto; background:#000; display:flex;">
                        </div>
                        <div class="col-4" id="displaysetFullscreenRight" style="height:100%; overflow:auto; padding:1rem;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Ensure fullscreen modal and viewer stretch vertically */
    #displaysetFullscreenModal .modal-content { height: 100vh; }
    #displaysetFullscreenModal .modal-body { height: calc(100vh - 56px); padding: 0; }
    #displaysetFullscreenModal .modal-content .container-fluid, #displaysetFullscreenModal .modal-content .row { height: 100%; }
    #displaysetFullscreenLeft { display:flex; align-items:stretch; }
    #displaysetFullscreenLeft .dicom-viewer-root { height:100% !important; min-height:100% !important; width:100% !important; flex:1 1 auto; }
</style>
