<x-filament-panels::page>
    @if ($activeCampaignId)
        <div
            wire:poll.2s="refreshCampaignProgress"
            class="mb-6 rounded-xl border border-primary-200 bg-primary-50 p-4 dark:border-primary-800 dark:bg-primary-950"
        >
            <div class="mb-2 flex items-center justify-between gap-4">
                <p class="text-sm font-medium text-primary-900 dark:text-primary-100">
                    {{ __('filament.send_sms.progress.sending') }}
                </p>
                <p class="text-sm text-primary-700 dark:text-primary-300">
                    {{ $campaignProgressLabel }}
                </p>
            </div>
            <div class="h-2 overflow-hidden rounded-full bg-primary-200 dark:bg-primary-900">
                <div
                    class="h-full rounded-full bg-primary-600 transition-all duration-300 dark:bg-primary-400"
                    style="width: {{ $campaignProgressPercent }}%"
                ></div>
            </div>
        </div>
    @endif

    {{ $this->content }}
</x-filament-panels::page>
