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

{% set xdata %}
list("billing/orders")
{% endset %}

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

{% block template %}
	{# Header #}
	<div class="flex justify-between items-center">
		<div>
			<a href="app/billing" class="inline-flex gap-1 items-center text-sm rounded-lg text-content-dimmed hover:text-content">
				<i class="text-lg ti ti-square-rounded-arrow-left-filled rtl:rotate-180"></i>
				{{ __('Billing overview') }}
			</a>

			<h1 class="mt-4">{{ p__('heading', 'Orders') }}</h1>

			<template x-if="total !== null">
				<div class="text-sm text-content-dimmed md:hidden">
					{{ __('Total :count orders')|replace({':count': '<span x-text="total"></span>'})|raw }}
				</div>
			</template>
		</div>

		<div class="flex gap-2 items-center md:hidden">
			<button type="button" class="hidden w-8 h-8 avatar">
				<i class="text-lg ti ti-adjustments-horizontal"></i>
			</button>
		</div>
	</div>

	{# Filters #}
	{% 
  include "/snippets/filters.twig" with { 
    search: false,
    total: __('Total :count orders'),
    sort: [
      {
        value: null,
        label: p__('label', 'Default')
      },
    
      {
        value: 'created_at',
        label: p__('label', 'Date')
      },
    ],
    filters: [
      {
        label: p__('label', 'Status'),
        model: 'status',
        options: [
          {
            value: 'draft',
            label: p__('order-status', 'Draft')
          },
          {
            value: 'pending',
            label: p__('order-status', 'Pending')
          },
          {
            value: 'failed',
            label: p__('order-status', 'Failed')
          },
          {
            value: 'processing',
            label: p__('order-status', 'Processing')
          },
          {
            value: 'completed',
            label: p__('order-status', 'Completed')
          },
          {
            value: 'cancelled',
            label: p__('order-status', 'Cancelled')
          },
        ]
      },
      {
        label: p__('label', 'Plan'),
        model: 'plan',
        options: [
        ]
      },
      {
        label: p__('label', 'Billing cycle'),
        model: 'billing_cycle',
        options: [
          {
            value: 'monthly',
            label: p__('billing-cycle', 'Monthly')
          },
          {
            value: 'yearly',
            label: p__('billing-cycle', 'Yearly')
          },
          {
            value: 'lifetime',
            label: p__('billing-cycle', 'Lifetime')
          },
          {
            value: 'one-time',
            label: p__('billing-cycle', 'Add-on credit')
          },
        ]
      },
      {
        label: p__('label', 'Workspace'),
        model: 'workspace',
        hidden: true,
      },
      {
        label: p__('label', 'Plan snapshot'),
        model: 'plan_snapshot',
        hidden: true,
      },
    ]
  } 
%}

	{# List #}
	<div class="group/list" :data-state="state">
		<div class="hidden group-data-[state=empty]/list:block">
			{% include "sections/empty.twig" with { title: p__('heading', 'Empty result set'), message: __('There are no order yet.'), reset: __('There are no order matching your search.') } %}
		</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-3">{{ p__('label', 'Order') }}</div>
			<div class="col-span-2">{{ p__('label', 'Status') }}</div>
			<div class="col-span-2">{{ p__('label', 'Credits') }}</div>
			<div class="col-span-2">{{ p__('label', 'Total') }}</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">
			{% for i in range(1,5) %}
				<li class="hidden grid-cols-12 gap-3 items-center md:p-3 box animate-pulse group-data-[state=initial]/list:grid">
					<div class="flex col-span-11 gap-3 items-center">
						<div class="avatar loading"></div>
						<div class="w-32 h-6 loading"></div>
					</div>

					<div class="col-span-1 justify-self-end">
						<i class="animate-pulse ti text-2xl ti-dots-vertical text-content-dimmed"></i>
					</div>
				</li>
			{% endfor %}

			<template x-for="order in resources" :key="order.id">
				{% include "snippets/cards/order.twig" with {ref: 'order', type: 'app'} %}
			</template>
		</ul>
	</div>
{% endblock %}