@section('title'){{ __('Bulk Email Generator - Zemail.me') }}@endsection

<span>
     <div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]  sm:px-8 sm:py-8 lg:p-12 p-2">
        <div class="text-center">
            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-400 py-2">Bulk Email Generator</h2>
            <!-- Upper Part: Input + Button -->
            <div class="w-full max-w-xl mx-auto mb-2">
              <div class="flex rounded-lg overflow-hidden border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-zinc-800">
                <input
                    type="number"
                    max="500"
                    wire:model="bulkCount"
                    class="w-full px-4 py-2 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-500 focus:outline-none"
                    placeholder="Enter a number (max 500)"
                    oninput="this.value = Math.min(500, Math.max(0, parseInt(this.value) || ''))"
                />
                <button
                    wire:click="generateBulk"
                    class="cursor-pointer px-5 py-2 bg-[#4361EE] text-white  transition-colors dark:bg-[#4361EE] "
                >
                  Generate
                </button>
                  @if (!empty($bulkEmails))
                      <button
                          type="button"
                          wire:click="downloadBulk"
                          class="cursor-pointer px-5 py-2 bg-[#00AB55] text-white transition-colors dark:bg-[#00AB55] "
                      >
                    <flux:icon.download />
                    </button>
                  @endif
              </div>
                @error('bulkCount')
                <span class="text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
                @enderror
            </div>


            @if(count($bulkEmails) > 0)
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    @foreach($bulkEmails as $email)
                        <div class="truncate px-4 py-2 bg-white dark:bg-zinc-800 rounded shadow text-zinc-900 dark:text-zinc-100">
                        {{ $email }}
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
     </div>
</span>