{% if attribute is defined %}
    {% set id = attribute %}
    {% set name = attribute %}
{% else %}
    {% set id = 'field-'~field.id %}
    {% set name = 'fields['~field.handle~']' %}
{% endif %}

{% if label is not defined and field is defined %}{% set label = field.name %}{% endif %}
{% if value is not defined and field is defined %}{% set value = field.default %}{% endif %}

{% if element %}
    {% if attribute is defined %}
        {% set value = element[attribute] ? true : false %}
    {% else %}
        {% set value = element.getFieldValue(field.handle) ? true : false %}
    {% endif %}
{% endif %}

<div x-data="Market.lightswitchField()"
     x-init="[initValue({{ value ? 'true' : 'false' }})]"
     x-cloak
>
    <label for="{{ id }}" class="block text-sm font-medium text-gray-700">
        {{ label }}
    </label>
    <div class="mt-1">
        <button type="button"
                class="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-action-500 bg-gray-200"
                aria-pressed="false"
                :aria-pressed="on.toString()"
                x-on:click="updateValue(on = !on)"
                :class="{ 'bg-action-600': on, 'bg-gray-200': !(on) }"
        >
            <input type="hidden"
                   id="{{ id }}"
                   name="{{ name }}"
                   value="{{ value ? '1' : '' }}"
                   x-ref="input"
            >
            <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
              <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                <svg class="bg-white h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                  <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                <svg class="bg-white h-3 w-3 text-action-600" fill="currentColor" viewBox="0 0 12 12">
                  <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                </svg>
              </span>
            </span>
        </button>
    </div>
    {% if field is defined and field.instructions %}
        <p class="mt-2 text-sm text-gray-500">{{ field.instructions|md(inlineOnly = true) }}</p>
    {% endif %}
</div>