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

{% set xdata = 'plans' %}
{% block title p__('title', 'Plans')|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', 'Plans') }}</h1>

    <a href="./#pricing" target="_blank" class="badge">
      <i class="ti ti-external-link"></i>
      {{ __('View detailed pricing table') }}
    </a>
  </div>
</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: __('Subscriptions are disabled currently. Please come back later.'), reset: __('There are no documment matching your search.') } %}
  </div>

  <template x-if="showSwitch">
    <div class="flex">
      <div
        class="flex p-0.5 rounded-lg bg-intermediate text-intermediate-content gap-0.5">
        <template x-if="plans.monthly.length > 0">
          <button type="button" @click="cycle = 'monthly'"
            class="flex items-center justify-center h-8 text-sm rounded-md cursor-pointer w-28"
            :class="{'bg-main': cycle=='monthly', 'text-content': cycle == 'monthly'}">
            {{ __("Monthly") }}
          </button>
        </template>

        <template x-if="plans.yearly.length > 0">
          <button type="button" @click="cycle = 'yearly'"
            class="flex items-center justify-center h-8 text-sm rounded-md cursor-pointer w-28"
            :class="{'bg-main': cycle=='yearly', 'text-content': cycle == 'yearly'}">
            {{ __("Yearly") }}
          </button>
        </template>

        <template x-if="plans.lifetime.length > 0">
          <button type="button" @click="cycle = 'lifetime'"
            class="flex items-center justify-center h-8 text-sm rounded-md cursor-pointer w-28"
            :class="{'bg-main': cycle=='lifetime', 'text-content': cycle == 'lifetime'}">
            {{ __("Lifetime") }}
          </button>
        </template>
      </div>
    </div>
  </template>

  <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="plan in plans[cycle]" :key="plan.id">
      <li class="relative grid grid-cols-3 gap-8 p-8 box hover:border-line">
        <a :href="`app/billing/checkout/${plan.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="plan.title"></h3>

            <template
              x-if="$store.workspace.subscription && $store.workspace.subscription.plan.id == plan.snapshot.id">
              <span class="badge">{{ __('Current') }}</span>
            </template>

            <template
              x-if="plan.is_featured && !($store.workspace.subscription && $store.workspace.subscription.plan.id == plan.snapshot.id)">
              <span class="badge badge-success">{{ __('Featured') }}</span>
            </template>
          </div>

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

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

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

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

          <p class="text-sm text-content-dimmed"
            x-text="plan.billing_cycle == 'monthly' ? `{{ __('Monthly') }}` : plan.billing_cycle == 'yearly' ? `{{ __('Yearly') }}` : plan.billing_cycle == 'lifetime' ? `{{ __('One time') }}` : 0">
          </p>
        </div>
      </li>
    </template>
  </ul>

  <template x-if="freePlan">
    <div
      :class="{'mt-10':plans.monthly.length > 0 || plans.yearly.length > 0 || plans.lifetime.length > 0}">
      <h2 class="text-sm">
        {{ p__('heading', 'Not ready to pay? Try free plan') }}
      </h2>

      <div class="relative flex justify-between gap-8 p-8 mt-4 box"
        :class="{'hover:border-line': !($store.workspace.subscription && $store.workspace.subscription.plan.id == freePlan.snapshot.id)}">
        <template
          x-if="!($store.workspace.subscription && $store.workspace.subscription.plan.id == freePlan.snapshot.id)">
          <a :href="`app/billing/checkout/${freePlan.id}`"
            class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>
        </template>

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

            <template
              x-if="$store.workspace.subscription && $store.workspace.subscription.plan.id == freePlan.snapshot.id">
              <span class="badge">{{ __('Current') }}</span>
            </template>

            <template
              x-if="freePlan.is_featured && !($store.workspace.subscription && $store.workspace.subscription.plan.id == freePlan.snapshot.id)">
              <span class="badge badge-success">{{ __('Featured') }}</span>
            </template>
          </div>

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

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

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

</div>
{% endblock %}