@section('title'){{ __('Dashboard - Zemail.me') }}@endsection
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
    <div class="grid auto-rows-min gap-4 md:grid-cols-2">

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
             <flux:icon.at-sign />
            </span>
            <div>
                <p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $usageLog['emails_created_count'] }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Mailbox Created</p>
            </div>
        </article>

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
             <flux:icon.mails />
            </span>
            <div>
                <p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $usageLog['emails_received_count'] }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Emails Received</p>
            </div>
        </article>

    </div>
        @if(auth()->user()->subscribedToProduct(config('app.plans')[0]['product_id']))

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Your <span class="text-accent-content font-bold">{{ $subscription['name'] ?? "" }}</span> subscription is active and will be
                    @if($subscription['ends_at'] ?? "") end at<span class="app-primary"> {{ \Carbon\Carbon::make($subscription['ends_at'])->toFormattedDayDateString() ?? "" }}.</span>
                    @else auto-renew as per the plan you chose.
                    @endif
                    To manage you subscription <a href="{{ route('billing') }}" target="_blank" class="text-blue-500">Click here</a></p>
            </div>
        </article>
        @else
        <div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]">
            <livewire:dashboard.pricing />
        </div>
        @endif

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Check if session flash data exists
                @if(session()->has('alert'))
                setTimeout(function() {
                    // Emitting showAlert event with type and message from session
                    Livewire.emit('showAlert', {
                        type: '{{ session('alert')['type'] }}',
                        message: '{{ session('alert')['message'] }}'
                    });
                }, 2000); // 2000ms = 2 seconds delay
                @endif
            });
        </script>
</div>