<template x-if="subscriptions.length > 0">
  <section class="flex flex-col gap-6 box " data-density="comfortable">
    <div class="flex items-center gap-2">
      <h2>{{ p__('heading', 'Subscriptions') }}</h2>

      <a class="badge" :href="`admin/subscriptions?sort=created_at:desc`">
        {{ p__('button', 'View all') }}
      </a>
    </div>

    <div>
      <div
        class="hidden md:grid grid-cols-12 gap-3 items-center px-3 py-2 text-content-dimmed text-xs group-data-[state=empty]/list:hidden">
        <div class="col-span-5">{{ p__('label', 'Subscription') }}</div>
        <div class="col-span-2">{{ p__('label', 'Plan') }}</div>
        <div class="col-span-2">{{ p__('label', 'Price') }}</div>
        <div class="col-span-2">{{ p__('label', 'Created') }}</div>
        <div class="col-span-1"></div>
      </div>

      <ul class="text-sm flex flex-col gap-1 group-data-[state=empty]:hidden">
        <template x-for="sub in subscriptions" :key="sub.id">
          <li
            class="relative grid items-center grid-cols-12 gap-3 p-3 box hover:border-line"
            x-data>
            <a :href="`admin/subscriptions/${sub.id}`"
              class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

            <div class="flex items-center col-span-11 gap-3 md:col-span-5">
              <div class="avatar">
                <span
                  x-text="sub.plan.title.match(/(\b\S)?/g).join('').slice(0, 1)"></span>
              </div>

              <div>
                <div class="flex items-center gap-2">
                  <div class="font-bold" x-text="sub.plan.title">
                  </div>

                  <template x-if="sub.status == 'active'">
                    <span
                      class="badge badge-success">{{ p__('subscription-status', 'Active') }}</span>
                  </template>

                  <template x-if="sub.status == 'trialing'">
                    <span
                      class="badge badge-info">{{ p__('subscription-status', 'Trialing') }}</span>
                  </template>

                  <template x-if="sub.status == 'canceled'">
                    <span
                      class="badge">{{ p__('subscription-status', 'Canceled') }}</span>
                  </template>

                  <template x-if="sub.status == 'ended'">
                    <span
                      class="badge badge-failure">{{ p__('subscription-status', 'Ended') }}</span>
                  </template>
                </div>

                <div class="text-xs text-content-dimmed mt-0.5">
                  {% set name %}
                  <a :href="`admin/workspaces/${sub.workspace.id}`"
                    x-text="sub.workspace.name"
                    class="relative hover:underline text-content"></a>
                  {% endset %}

                  {{ __('Workspace: :name')|replace({':name' : name})|raw }}
                </div>
              </div>
            </div>

            <div class="hidden md:block md:col-span-2">
              <div>
                <div x-text="sub.plan.title">
                </div>

                <template x-if="sub.plan.billing_cycle == 'monthly'">
                  <div class="text-xs text-content-dimmed mt-0.5">
                    {{ p__('billing-cycle', 'Monthly') }}</div>
                </template>

                <template x-if="sub.plan.billing_cycle == 'yearly'">
                  <div class="text-xs text-content-dimmed mt-0.5">
                    {{ p__('billing-cycle', 'Yearly') }}</div>
                </template>

                <template x-if="sub.plan.billing_cycle == 'lifetime'">
                  <div class="text-xs text-content-dimmed mt-0.5">
                    {{ p__('billing-cycle', 'Lifetime') }}</div>
                </template>
              </div>
            </div>

            <div class="hidden md:block md:col-span-2">
              <template x-if="sub.order">
                <div>
                  <div class="font-bold">
                    <x-money :data-value="sub.plan.price"
                      :currency="sub.order.currency.code"
                      :minor-units="sub.order.currency.fraction_digits"></x-money>
                  </div>

                  <div class="text-xs text-content-dimmed mt-0.5"
                    x-text="sub.plan.billing_cycle == 'monthly' ? `{{ __('per month') }}` : sub.plan.billing_cycle == 'yearly' ? `{{ __('per year') }}` : `{{ __('one-time') }}`">
                  </div>
                </div>
              </template>

              <template x-if="!sub.order">
                <span>-</span>
              </template>
            </div>

            <div class="hidden md:block md:col-span-2">
              <x-time :datetime="sub.created_at" data-type="date"></x-time>
            </div>

            <div class="col-span-1 justify-self-end">
              <div class="relative"
                @click.outside="$refs.context.removeAttribute('data-open')">

                <button class="relative z-10"
                  @click="$refs.context.toggleAttribute('data-open')">
                  <i
                    class="ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
                </button>

                <div class="menu" x-ref="context">
                  <ul>
                    <li>
                      <a :href="`admin/subscriptions/${sub.id}`"
                        class="flex items-center gap-2 px-4 py-2 hover:no-underline hover:bg-intermediate">
                        {{ p__('button', 'Details') }}
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </section>
</template>