<div
  id={"#{@id}-wrapper"}
  class="flex items-center"
  phx-hook="Toggle"
  x-data="{ on: false }"
  x-init={"() => { $watch('on', val => $dispatch('toggle-change', { id: '##{@id}', state: val }) ) }"}
>
  <%= hidden_input @form, @field.name %>
  <button type="button" class="bg-gray-200 dark:bg-stone-600 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:dark:ring-accent-dark" role="switch" aria-checked="false" x-ref="switch" x-state:on="Enabled" x-state:off="Not Enabled" x-bind:class="{ 'bg-primary dark:bg-accent-dark': on, 'bg-gray-200 dark:bg-stone-600': !(on) }" x-bind:aria-checked="on.toString()" @click="on = !on">
    <span class="sr-only">Use setting</span>
    <span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white dark:bg-base-light shadow transform ring-0 transition ease-in-out duration-200" x-state:on="Enabled" x-state:off="Not Enabled" x-bind:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
  </button>
  <span class="ml-3" @click="on = !on; $refs.switch.focus()">
    <span class="text-sm font-medium text-content-dark dark:text-content-light">
      <%= @label %>
    </span>
  </span>
</div>