{# app/templates/vendor/partials/vendor_info.html #}
{#
This component loads vendor data client-side via JavaScript
No server-side vendor data required - follows same pattern as admin pages
#}
<div class="p-4 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <!-- Loading State -->
    <div x-show="!vendor && !error" class="flex items-center">
        <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-4 animate-pulse">
            <span class="text-xl">🏪</span>
        </div>
        <div class="flex-1">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2 animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse"></div>
        </div>
    </div>

    <!-- Vendor Data (loaded via JavaScript) -->
    <div x-show="vendor" class="flex items-center justify-between">
        <div class="flex items-center">
            <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-600 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-purple-600 dark:text-purple-100"
                      x-text="vendor?.name?.charAt(0).toUpperCase() || '?'"></span>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                    x-text="vendor?.name || 'Loading...'"></h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    <span class="font-medium" x-text="vendor?.vendor_code"></span>
                    <template x-if="vendor?.subdomain">
                        <span>• <span x-text="vendor.subdomain"></span>.platform.com</span>
                    </template>
                </p>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <template x-if="vendor">
                <span class="px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="vendor.is_verified
                        ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100'
                        : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'"
                      x-text="vendor.is_verified ? 'Verified' : 'Pending'"></span>
            </template>
            <template x-if="vendor">
                <span class="px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="vendor.is_active
                        ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100'
                        : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
                      x-text="vendor.is_active ? 'Active' : 'Inactive'"></span>
            </template>
        </div>
    </div>

    <!-- Error State -->
    <div x-show="error" class="text-center py-4">
        <p class="text-sm text-red-600 dark:text-red-400" x-text="error"></p>
    </div>
</div>