{% if addon.options %}
  <div class="space-y-3 rounded-lg border border-slate-200 p-4">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-semibold text-slate-900">{{ title }}</p>
        <p class="text-xs text-slate-500">{{ description }}</p>
      </div>
    </div>
    {% for option in addon.options %}
      <div class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-slate-100 p-3">
        <div class="space-y-1">
          <p class="text-sm font-semibold text-slate-900">
            {% if addon.options|length > 1 %}{{ option.delta_value|default:"0" }}{% else %}{{ single_label }}{% endif %}
          </p>
          {% if option.price_display %}
          <p class="text-xs text-slate-600 font-medium">{{ option.price_display }}</p>
          {% endif %}
        </div>
        <div class="flex items-center gap-3">
          <span
            id="toggle_status__{{ option.price_id }}"
            class="text-xs font-semibold text-slate-600"
            data-enabled-label="Enabled"
            data-disabled-label="Disabled"
          >
            {{ option.quantity|default:0|yesno:"Enabled,Disabled" }}
          </span>
          <label class="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              class="sr-only peer"
              data-addon-toggle
              data-toggle-target="quantity__{{ option.price_id }}"
              data-toggle-status="toggle_status__{{ option.price_id }}"
              aria-label="Toggle {{ aria_label }}"
              {% if option.quantity|default:0|add:"0" > 0 %}checked{% endif %}
              {% if addons_disabled %}disabled{% endif %}
            >
            <div class="w-11 h-6 rounded-full border border-slate-300 bg-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 peer-checked:bg-emerald-600 transition"></div>
            <div class="absolute left-1 top-1 h-4 w-4 rounded-full border border-slate-300 bg-white transition peer-checked:translate-x-5"></div>
          </label>
          <input
            type="hidden"
            id="quantity__{{ option.price_id }}"
            name="quantity__{{ option.price_id }}"
            min="0"
            value="{{ option.quantity|default:0 }}"
            data-addon-kind="{{ addon_kind }}"
            data-delta="{{ option.delta_value|default:'0' }}"
            data-price-cents="{{ option.unit_amount|default:'' }}"
            data-currency="{{ option.currency|upper }}"
            {% if addons_disabled %}disabled{% endif %}
          >
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}