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

{% set xdata = 'packs' %}
{% block title p__('title', 'Add-on credit packs')|title %}

{% block template %}
<div>
  {% include "snippets/back.twig" with {link: 'app/billing', label: p__('button', 'Billing overview')} %}

  <div class="flex items-center gap-4 mt-4">
    <h1>{{ p__('heading', 'Add-on credit packs') }}</h1>
  </div>

  <p class="mt-2 text-content-dimmed">
    {{ __('Permanent, non-renewing extras for your subscription, used only after recurring credits run out.')}}
  </p>
</div>

{# List #}
<div class="group/list" data-state="initial" :data-state="state">
  <div class="hidden group-data-[state=empty]/list:block">
    {% include "sections/empty.twig" with { title: p__('heading', 'Not available'), message: __('Add-on credit packs are not available at the moment') } %}
  </div>

  <ul class="group-data-[state=empty]/list:hidden flex flex-col gap-1 mt-3">
    {% for i in range(1,3) %}
    <li
      class="hidden group-data-[state=initial]/list:grid grid-cols-3 gap-8 p-8 box">
      <div>
        <div class="w-32 h-6 loading"></div>
        <div class="w-48 h-5 mt-1 loading"></div>
      </div>

      <div>
        <div class="w-32 h-6 loading"></div>
        <div class="w-48 h-5 mt-1 loading"></div>
      </div>

      <div class="flex flex-col items-end">
        <div class="w-32 h-6 loading"></div>
        <div class="w-48 h-5 mt-1 loading"></div>
      </div>
    </li>
    {% endfor %}

    <template x-for="pack in packs" :key="pack.id">
      <li class="relative grid grid-cols-3 gap-8 p-8 box hover:border-line">
        <a :href="`app/billing/checkout/${pack.id}`"
          class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

        <div>
          <div class="flex items-center gap-4">
            <h3 class="text-lg" x-text="pack.title"></h3>

            <template x-if="packs.is_featured">
              <span class="badge badge-success">{{ __('Featured') }}</span>
            </template>
          </div>

          <p class="text-sm text-content-dimmed" x-text="packs.description"></p>
        </div>

        <div>
          <div class="relative text-lg font-bold">
            <x-credit :data-value="pack.credit_count"></x-credit>
          </div>

          <p class="text-sm text-content-dimmed">
            {{ __('Credits') }}
          </p>
        </div>

        <div class="text-right">
          <div class="text-lg font-bold">
            <x-money :data-value="pack.price" currency="{{ currency.code }}"
              minor-units="{{ currency.fraction_digits }}"></x-money>
          </div>

          <p class="text-sm text-content-dimmed">
            {{ __('One time') }}
          </p>
        </div>
      </li>
    </template>
  </ul>

  <template x-if="packs.length > 0">
    <p class="mt-4 text-xs text-content-dimmed">
      {{ __('You can purchase additional credits to supplement your existing subscription.') }}
    </p>
  </template>
</div>
{% endblock %}