<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>
  {% if addon.options %}
    {% for option in addon.options %}
    <div class="border border-slate-100 rounded-lg p-3 bg-white shadow-sm flex items-center justify-between gap-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" }} {{ delta_unit }}{% 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-2">
        <button type="button" class="h-9 w-9 inline-flex items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                data-qty-target="quantity__{{ option.price_id }}" data-qty-display="display__{{ option.price_id }}" aria-label="Decrease {{ aria_label }} quantity" {% if addons_disabled %}disabled{% endif %}>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
          </svg>
        </button>
        <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 %}
        >
        <span id="display__{{ option.price_id }}" class="w-10 text-center text-sm font-semibold text-slate-900">{{ option.quantity|default:0 }}</span>
        <button type="button" class="h-9 w-9 inline-flex items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                data-qty-target="quantity__{{ option.price_id }}" data-qty-display="display__{{ option.price_id }}" aria-label="Increase {{ aria_label }} quantity" data-direction="up" {% if addons_disabled %}disabled{% endif %}>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" />
          </svg>
        </button>
      </div>
    </div>
    {% endfor %}
  {% endif %}
</div>
