<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 ">
    <div class="w-full mb-8 items-center flex justify-center">
        <h1 class="text-center text-3xl text-gray-900 dark:text-gray-200">Purchase Subscription</h1>
    </div>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8">

        @if(isset($plans))
           @foreach($plans as $plan)
                <div class="rounded-2xl border dark:border-white/[0.1] border-black/[0.3] p-6 shadow-xs ring-1 ring-white/[0.5] sm:px-8 lg:p-12">
                    <div class="text-center">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-400">{{ $plan->name }} @if(!$plan->monthly_billing)
                                <flux:badge variant="solid" size="sm" color="emerald">2 Months Free</flux:badge>
                            @endif</h2>

                        <p class="mt-2 sm:mt-4">
                            <strong class="text-3xl font-bold text-gray-900 dark:text-gray-200 sm:text-4xl">${{ $plan->price }}</strong>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-400">/{{ $plan->monthly_billing ? 'month' : 'year' }}</span>
                        </p>
                    </div>

                    <ul class="mt-6 space-y-2">

                        @if($plan->details)
                            @forelse ($plan->details as $key => $value)
                                @if ($value)
                                    <li class="flex items-center gap-1">
                                        @if($value == "true")<flux:icon.check-circle />
                                        @else <flux:icon.circle-x />
                                        @endif
                                        <span class="text-gray-700 dark:text-gray-400 "> {{ $key }} </span>
                                    </li>
                                @endif
                            @empty
                            @endforelse
                        @endif
                    </ul>

                    <flux:button variant="primary" class="w-full mt-6 cursor-pointer" wire:click="choosePlan('{{ $plan->pricing_id }}')">
                        Choose Plan
                    </flux:button>
                </div>
           @endforeach
        @endif

    </div>
</div>
