<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="p-4">
  <div class="mb-4">
    <h2 class="display-6 fw-bold mb-2">Convert From Other Units</h2>
    <p class="text-muted fs-5">Find your US Ring Size using our conversion tool below.</p>
  </div>

  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body bg-light">
      <div class="mb-4">
        <label class="form-label fw-bold fs-5">Showing:</label>
        <a data-turbo-frame="remote_modal" data-turbo-prefetch="false" id="unit-selector-link" style="display: none;" href="/store/fyrs/option4.turbo_stream?sel=3">
</a>        <select class="form-select form-select-lg border-primary" id="unit-selector" 
                data-current-sel="3">
          <option value="6" >British, Irish, Australian & New Zealand</option>
          <option value="1" >Canada</option>
          <option value="7" >European</option>
          <option value="3" selected>Inside Diameter (mm)</option>
          <option value="2" >Inside Diameter (inches)</option>
          <option value="5" >Inside Circumference (mm)</option>
          <option value="4" >Inside Circumference (inches)</option>
        </select>
      </div>

      <div class="text-center mb-3">
        <div id="conversion-result" class="alert alert-primary fw-semibold fs-5">
          Click Number/Letter Below To Convert
        </div>
      </div>

      <div class="row g-0 conversion-grid">
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="3" role="button" tabindex="0">
              14.1
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="3 1/4" role="button" tabindex="0">
              14.3
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="3 1/2" role="button" tabindex="0">
              14.5
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="3 3/4" role="button" tabindex="0">
              14.7
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="4" role="button" tabindex="0">
              14.9
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="4 1/4" role="button" tabindex="0">
              15.1
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="4 1/2" role="button" tabindex="0">
              15.3
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="4 3/4" role="button" tabindex="0">
              15.5
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="5" role="button" tabindex="0">
              15.7
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="5 1/4" role="button" tabindex="0">
              15.9
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="5 1/2" role="button" tabindex="0">
              16.1
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="5 3/4" role="button" tabindex="0">
              16.3
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="6" role="button" tabindex="0">
              16.5
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="6 1/4" role="button" tabindex="0">
              16.7
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="6 1/2" role="button" tabindex="0">
              16.9
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="6 3/4" role="button" tabindex="0">
              17.1
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="7" role="button" tabindex="0">
              17.3
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="7 1/4" role="button" tabindex="0">
              17.5
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="7 1/2" role="button" tabindex="0">
              17.7
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="7 3/4" role="button" tabindex="0">
              17.9
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="8" role="button" tabindex="0">
              18.1
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="8 1/4" role="button" tabindex="0">
              18.3
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="8 1/2" role="button" tabindex="0">
              18.5
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="8 3/4" role="button" tabindex="0">
              18.7
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="9" role="button" tabindex="0">
              18.9
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="9 1/4" role="button" tabindex="0">
              19.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="9 1/2" role="button" tabindex="0">
              19.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="9 3/4" role="button" tabindex="0">
              19.6
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="10" role="button" tabindex="0">
              19.8
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="10 1/4" role="button" tabindex="0">
              20
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="10 1/2" role="button" tabindex="0">
              20.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="10.3/4" role="button" tabindex="0">
              20.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="11" role="button" tabindex="0">
              20.6
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="11 1/4" role="button" tabindex="0">
              20.8
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="11 1/2" role="button" tabindex="0">
              21
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="11 3/4" role="button" tabindex="0">
              21.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="12" role="button" tabindex="0">
              21.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="12 1/4" role="button" tabindex="0">
              21.6
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="12 1/2" role="button" tabindex="0">
              21.8
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="12 3/4" role="button" tabindex="0">
              22
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="13" role="button" tabindex="0">
              22.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="13 1/4" role="button" tabindex="0">
              22.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="13 1/2" role="button" tabindex="0">
              22.6
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="13 3/4" role="button" tabindex="0">
              22.8
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="14" role="button" tabindex="0">
              23
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="14 1/4" role="button" tabindex="0">
              23.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="14 1/2" role="button" tabindex="0">
              23.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="14 3/4" role="button" tabindex="0">
              23.6
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="15" role="button" tabindex="0">
              23.8
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="15 1/4" role="button" tabindex="0">
              24
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="15 1/2" role="button" tabindex="0">
              24.2
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="15 3/4" role="button" tabindex="0">
              24.4
            </div>
          </div>
          <div class="col-2">
            <div class="rs-item border text-center py-2" data-val="16" role="button" tabindex="0">
              24.6
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
  .rs-item {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
  }

  .rs-item:hover {
    background-color: #f8f9fa;
  }

  .rs-item.selected {
    background-color: var(--bs-primary);
    color: white;
  }
</style>

<script>
  (function() {
    // Initialize immediately since content is loaded via Turbo Stream
    function initializeRingSizeConverter() {
      // Handle unit selector change
      const unitSelector = document.getElementById('unit-selector');
      if (unitSelector) {
        unitSelector.addEventListener('change', function(e) {
          const sel = this.value;
          const url = '/store/fyrs/option4.turbo_stream?sel=' + sel;
          
          // Use fetch with Turbo Stream to update the modal
          fetch(url, {
            headers: {
              'Accept': 'text/vnd.turbo-stream.html'
            }
          })
          .then(response => response.text())
          .then(html => Turbo.renderStreamMessage(html));
        });
      }

      // Handle ring size item clicks
      const rsItems = document.querySelectorAll('.rs-item');
      const resultDiv = document.getElementById('conversion-result');
      
      rsItems.forEach(item => {
        item.addEventListener('click', function() {
          const usSize = this.dataset.val;
          
          // Update result text
          resultDiv.innerHTML = '<span class="text-muted">Your US Ring Size:</span> <strong class="fs-4">' + usSize + '</strong>';
          resultDiv.className = 'alert alert-success fw-semibold fs-5';
          
          // Update selected state
          rsItems.forEach(i => i.classList.remove('selected'));
          this.classList.add('selected');
        });
        
        // Keyboard accessibility
        item.addEventListener('keypress', function(e) {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            this.click();
          }
        });
      });
    }

    // Run initialization
    initializeRingSizeConverter();
  })();
</script>

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