<turbo-stream action="update" target="remote_modal"><template>
  <turbo-frame id="remote_modal">
  <div class="modal fade" data-controller="modal"
       data-action="turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#closeBackground">
    <div class="modal-dialog modal-xl">
      <div class="modal-content rounded-0 border shadow-sm position-relative" style="border-width: 10px !important; border-color: #C0C0C0 !important;">
        <button type="button" class="btn-close btn-sm position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
        <div class="modal-body remote_modal_body " id="remote_modal_body">
          
    <div class="bg-light p-4" data-controller="product-360"
     data-product-360-product-id-value="9110"
     data-product-360-base-path-value="/jewelry-assets/vi2/9110">
  <div class="mb-4">
    <h3 class="fs-4 fw-semibold mb-0 ">Pave Set Oval Diamond Engagement Ring (1/3 ct. tw.)</h3>
    <div class="mb-3">ENR9110 </div>
    <p class="text-muted mb-1">
      <i class="bi bi-info-circle me-1"></i> Auto-rotating - Drag or swipe to control manually
    </p>
    <p class="text-muted small mb-0">
      <i class="bi bi-hand-index me-1"></i> Click play/pause button to toggle auto-rotation
    </p>
  </div>

  <div class="text-center position-relative border">
    <img data-product-360-target="image"
         class="img-fluid rounded"
         style="max-width: 720px; width: 100%; height: auto; cursor: grab;"
         src="/jewelry-assets/vi2/9110/img00000.jpg"
         alt="Pave Set Oval Diamond Engagement Ring (1/3 ct. tw.) 360° view"/>
    
    <!-- Play/Pause Button Overlay -->
    <div class="position-absolute top-0 end-0 m-3">
      <button type="button" 
              class="btn btn-light btn-sm rounded-circle shadow"
              data-product-360-target="playButton"
              data-action="click->product-360#toggleAutoplay"
              title="Play/Pause rotation">
        <i class="bi bi-pause-circle fs-5"></i>
      </button>
    </div>
  </div>
</div>


        </div>
      </div>
    </div>
  </div>
</turbo-frame></template></turbo-stream>