{% extends "/layouts/main.twig" %}

{% set xdata %}
subscription({{ subscription|json_encode|raw }})
{% endset %}

{% block title p__('title', 'Checkout')|title %}

{% block template %}
<div class="flex flex-col gap-1 group">
  <div
    class="flex items-center gap-6 py-8 border px-14 border-line-dimmed rounded-xl">
    <div
      class="relative flex items-center justify-center rounded-full w-28 h-28 text-success/25 shrink-0">

      <svg class="absolute top-0 left-0 w-full h-full" width="112" height="112"
        viewBox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="56" cy="56" r="55.5" stroke="currentColor"
          stroke-dasharray="8 8" />
      </svg>

      <div
        class="flex items-center justify-center w-24 h-24 transition-all rounded-full text-success bg-success/25">
        <i class="text-5xl ti ti-square-rounded-check"></i>
      </div>
    </div>

    <div>
      <h1 class="text-xl font-bold">{{ __('Success!') }}</h1>
      <p class="mt-1 text-content-dimmed"
        x-text="subscription.plan.billing_cycle == 'one-time' ? `{{ __('Purchase is completed successfully!') }}` : `You subscribed to the ${subscription.plan.title} plan successfully!`">
      </p>
    </div>
  </div>

  {% include "snippets/subscription.twig" with {hideCancelButton:true}%}
</div>
{% endblock %}