<!-- htmlhint doctype-first:false -->
<div class="space-y-6">
  <!-- LLM Providers Overview -->
  <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white">
    <h2 class="text-2xl font-bold mb-4 flex items-center">
      <svg class="h-8 w-8 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
      LLM Providers
    </h2>
    <p class="text-blue-100 mb-4">Configure external LLM providers for the internal LLM Chat feature.</p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="text-center">
        <div class="text-3xl font-bold">{{ providers|length }}</div>
        <div class="text-blue-100 text-sm">Total Providers</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ providers|selectattr('enabled')|list|length }}</div>
        <div class="text-blue-100 text-sm">Enabled</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ providers|selectattr('health_status', 'eq', 'healthy')|list|length }}</div>
        <div class="text-blue-100 text-sm">Healthy</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ providers|sum(attribute='model_count') }}</div>
        <div class="text-blue-100 text-sm">Total Models</div>
      </div>
    </div>
  </div>

  <!-- Add Provider Button -->
  <div class="flex justify-end">
    <button onclick="showAddProviderModal()"
      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
      Add Provider
    </button>
  </div>

  <!-- Providers Table -->
  <div class="bg-white shadow rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-900">
          <tr>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Name</th>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Type</th>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              API Base</th>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Models</th>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Status</th>
            <th scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Health</th>
            <th scope="col"
              class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
              Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
          id="providers-table-body">
          {% for provider in providers %}
          <tr id="provider-row-{{ provider.id }}" class="hover:bg-gray-50 dark:hover:bg-gray-700">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div>
                  <div class="text-sm font-medium text-gray-900 dark:text-white">{{ provider.name }}</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">{{ provider.slug }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                {{ provider.provider_type }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              {{ provider.api_base or '-' }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              {{ provider.model_count }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <button onclick="toggleLLMProvider('{{ provider.id }}')" class="focus:outline-none"
                hx-post="{{ root_path }}/admin/llm/providers/{{ provider.id }}/state"
                hx-target="#provider-row-{{ provider.id }}" hx-swap="outerHTML">
                {% if provider.enabled %}
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                  Enabled
                </span>
                {% else %}
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                  Disabled
                </span>
                {% endif %}
              </button>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span id="health-{{ provider.id }}"
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {% if provider.health_status == 'healthy' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% elif provider.health_status == 'unhealthy' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300{% endif %}">
                {{ provider.health_status }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button onclick="checkLLMProviderHealth('{{ provider.id }}')"
                class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-2"
                title="Check Health">
                <svg class="h-5 w-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button onclick="fetchLLMProviderModels('{{ provider.id }}')"
                class="text-cyan-600 hover:text-cyan-900 dark:text-cyan-400 dark:hover:text-cyan-300 mr-2"
                title="List Available Models">
                <svg class="h-5 w-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                </svg>
              </button>
              <button onclick="syncLLMProviderModels('{{ provider.id }}')"
                class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300 mr-2"
                title="Sync Models to Database">
                <svg class="h-5 w-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              </button>
              <button onclick="editLLMProvider('{{ provider.id }}')"
                class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-2"
                title="Edit">
                <svg class="h-5 w-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </button>
              <button onclick="deleteLLMProvider('{{ provider.id }}', '{{ provider.name }}')"
                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300" title="Delete">
                <svg class="h-5 w-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="px-6 py-12 text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No providers configured</h3>
              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding an LLM provider.</p>
              <div class="mt-6">
                <button onclick="showAddProviderModal()"
                  class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                  <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  Add Provider
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Provider Types Reference -->
  <div class="bg-white shadow rounded-lg p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Supported Provider Types</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {% for ptype in provider_types %}
      <div class="text-center p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ ptype }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
