<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-lg modal-dialog-scrollable modal-fullscreen-sm-down">
      <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="cdj-detail" data-controller="image-preview">
  <h2 class="cdj-heading h4 text-center mt-2 mb-3 px-4">Diamond Engagement Ring Jacket</h2>

  <img class="cdj-detail-main img-fluid d-block mx-auto rounded" alt="Custom design Diamond Engagement Ring Jacket" data-image-preview-target="main" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/6/large_CM8_1_A.jpg" />

    <div class="d-flex justify-content-center gap-2 mt-3">
        <img class="cdj-detail-thumb rounded border" alt="Alternate view of Diamond Engagement Ring Jacket" role="button" tabindex="0" data-src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/6/large_CM8_1_A.jpg" data-action="click-&gt;image-preview#show" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/6/small_CM8_1_A.jpg" />
        <img class="cdj-detail-thumb rounded border" alt="Alternate view of Diamond Engagement Ring Jacket" role="button" tabindex="0" data-src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_2/6/large_CM8_2_A.jpg" data-action="click-&gt;image-preview#show" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_2/6/small_CM8_2_A.jpg" />
    </div>

    <div class="text-muted pt-3 px-1 px-md-4 pb-2">
      <p>We got a request from our customer for a ring jacket for her engagement ring. She wanted something eye-catching and with a royal feel. We discussed some design ideas with her and agreed upon this crown inspired jacket design. Our free hand wax carver created the wax model around the engagement ring. It's finished with 1.30ct tw round cut diamonds in palladium. </p>
    </div>
</div>

<style>
.cdj-detail-main {
  max-height: 400px;
}
.cdj-detail-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: pointer;
}
.cdj-detail-thumb:hover,
.cdj-detail-thumb:focus-visible {
  border-color: var(--bs-dark) !important;
}
</style>


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