<script src="https://js.stripe.com/v3/"></script>

<form @submit.prevent="submit"
  x-data="stripe('{{ (option.stripe.publishable_key ?? "")|e("html_attr") }}')">
  <label for="">{{ p__('label', 'Pay with card') }}</label>

  <div class="flex items-center mt-2 input">
    <div x-ref="card" class="w-full"></div>
  </div>

  <button type="submit" class="w-full mt-6 button button-accent"
    :disabled="disabled || processing" :processing="processing=='stripe'">
    {% include "/snippets/spinner.twig" %}

    {{ plan.billing_cycle in ['monthly', 'yearly'] ?  p__('button', 'Subscribe') : p__('button', 'Purchase') }}
  </button>

  <template x-if="error">
    <p
      class="flex items-center gap-1 mt-4 text-xs list-disc list-inside text-failure">
      <i class="text-base ti ti-square-rounded-x-filled"></i>
      <span x-text="error"></span>
    </p>
  </template>

  <template x-if="!error">
    <p
      class="flex items-center gap-1 mt-4 text-xs list-disc list-inside text-content-dimmed">
      <i class="text-base ti ti-lock"></i>
      {{ __('All card payments secured with :gateway.')|replace({':gateway' : card_gateway.name}) }}
    </p>
  </template>
</form>