<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="9304"
     data-product-360-metal-type-value="wg"
     data-product-360-view-type-value="main">
  <div class="mb-4">
    <h3 class="fs-3 fw-semibold mb-2">Blue Sapphire and Diamond Woman Anniversary Ring (1/2 ct. tw. Diamonds)</h3>
    <div class="mb-3">WB9304 </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 mb-4 position-relative border shadow-sm">
    <img data-product-360-target="image"
         class="img-fluid"
         style="max-width: 720px; width: 100%; height: auto; cursor: grab;"
         src="/jewelry-assets/vi/9304/video/main/wg/img00000.jpg"
         alt="Blue Sapphire and Diamond Woman Anniversary Ring (1/2 ct. tw. Diamonds) 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>

  <p class="text-center text-muted small mb-3">Choose Metal Type & View</p>
  <div class="d-flex flex-wrap gap-2 justify-content-center">
    <button type="button"
            class="btn btn-sm btn-outline-secondary"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="wg"
            data-view="main">
      <i class="bi bi-circle-fill text-secondary me-1"></i> White Metal
    </button>
    <button type="button"
            class="btn btn-sm btn-outline-warning"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="yg"
            data-view="main">
      <i class="bi bi-circle-fill me-1" style="color: #d4af37;"></i> Yellow Gold
    </button>
    <button type="button"
            class="btn btn-sm btn-outline-danger"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="rg"
            data-view="main">
      <i class="bi bi-circle-fill" style="color: rosybrown;"></i> Rose Gold
    </button>
    <button type="button"
            class="btn btn-sm btn-outline-secondary"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="wg"
            data-view="hand">
      <i class="bi bi-hand-index me-1"></i> Hand White
    </button>
    <button type="button"
            class="btn btn-sm btn-outline-warning"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="yg"
            data-view="hand">
      <i class="bi bi-hand-index me-1" style="color: #d4af37;"></i> Hand Yellow
    </button>
    <button type="button"
            class="btn btn-sm btn-outline-danger"
            style="flex: 1 1 calc(33.333% - 0.5rem); min-width: 120px;"
            data-action="click->product-360#switchView"
            data-metal="rg"
            data-view="hand">
      <i class="bi bi-hand-index me-1"></i> Hand Rose
    </button>
  </div>



</div>


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