{% if repository_id %}
    <div hx-get="/api/repositories/{{ repository_id }}/stats/html"
         hx-target="#statistics-content"
         hx-swap="innerHTML"
         hx-trigger="load">
        <div class="flex items-center justify-center h-64">
            <div class="text-center max-w-md">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4">
                </div>
                <p class="text-gray-900 dark:text-gray-100 font-medium">
                    Loading repository statistics...
                </p>
                <p class="text-xs text-gray-600 dark:text-gray-400 mt-3">
                    This may take several minutes for large repositories
                </p>
            </div>
        </div>
    </div>
{% else %}
    <!-- No repository selected -->
    <div class="flex items-center justify-center h-64">
        <div class="text-center">
            <svg class="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                </path>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
                Select Repository
            </h3>
            <p class="text-gray-700 dark:text-gray-300">
                Choose a repository to view detailed statistics and analytics
            </p>
        </div>
    </div>
{% endif %}