<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        @can('create voucher')
            <div>
                <flux:button href="{{ route('studio.loyalty.voucher.create') }}" variant="primary" wire:navigate.hover
                    class="text-sm">
                    Tambah
                </flux:button>
            </div>
        @endcan
    </div>

    <div class="mt-6">
        @if (!empty($stats))
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                @foreach ($stats as $stat)
                    <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                        <flux:subheading>{{ $stat['title'] }}</flux:subheading>
                        <flux:heading size="xl" class="mb-2">{{ $stat['value'] }}</flux:heading>
                    </div>
                @endforeach
            </div>
        @endif

        <livewire:datatable.studio.loyalty.vouchers-table />
    </div>

    @include('components.confirmation.delete')
</flux:main>
