<% name = label.parameterize %>

<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= default_index %>;">

  <div class="position-relative" role="radiogroup" aria-labelledby="<%= name %>">
    <% knob_options.each_with_index do |value, i| %>
      <label class="knob__option" style="--i: <%= i %>">
        <input
          <%= "checked" if value == knob_options[default_index] %>
          data-action="change->knob#optionChanged"
          data-index="<%= i %>"
          data-knob-target="option"
          name="<%= name %>"
          type="radio"
          value="<%= value %>"
        />
        <span><%= value %></span>
      </label>
    <% end %>
    <input
      aria-hidden
      class="knob__slider"
      data-action="input->knob#sliderChanged"
      data-knob-target="slider"
      max="<%= knob_options.length - 1 %>"
      min="0"
      type="range"
      value="<%= default_index %>"
    />

    <div class="knob__knob" aria-hidden></div>
  </div>

  <div id="<%= name %>" class="knob__label">Days</div>
</fieldset>
