{% if record.is_processing %}
	<div id="htmx-task-container" hx-ext="ws" ws-connect="{{ record.task_url }}" class="flex items-center gap-3">
		<div id="htmx-task-{{ record.id }}">
			<div class="w-24 bg-slate-200 rounded-full h-2 overflow-hidden">
				<div class="bg-blue-600 h-2 rounded-full transition-all duration-500" style="width: 0%"></div>
			</div>
			<span class="text-sm text-slate-500 italic">Initializing...</span>
		</div>
	</div>
{% elif record.is_ready %}
	<span class="inline-flex items-center px-2.5 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
		<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
		Ready
	</span>
{% else %}
    <span class="text-xs text-slate-400">Idle</span>
{% endif %}