<div class="m-auto min-w-md text-center" wire:poll>
    <img class="inline" src="https://placehold.co/200x200" />
    <div class="p-5">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            Album wird verarbeitet
        </h5>
        <p class="text-start mb-3 font-normal text-gray-700 dark:text-gray-400">
            Die Dateien in diesem Album wurden geändert. <br>
            Bitte warte einen moment bis Verarbeitung abgeschlossen ist.
        </p>
        
        <div class="flex justify-between mb-1">
            <span class="text-base font-medium text-blue-700 dark:text-white">Aufgabe {{ $processedJobs }} von {{ $totalJobs }}</span>
            <span class="text-sm font-medium text-blue-700 dark:text-white">{{ $progress }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
            <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ $progress }}%"></div>
        </div>
    </div>
</div>