<!-- Error State for Live View -->
<div class="flex flex-col items-center justify-center h-[600px] text-red-500 dark:text-red-400">
    <svg class="w-24 h-24 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <p class="text-lg font-medium">Error Loading Unit</p>
    <p class="text-sm mt-2 text-gray-600 dark:text-gray-400">{{ error }}</p>
</div>
