<!-- htmlhint doctype-first:false -->
<div class="space-y-6">
  <!-- LLM Models Overview -->
  <div class="bg-gradient-to-r from-green-600 to-teal-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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
      </svg>
      LLM Models
    </h2>
    <p class="text-green-100 mb-4">Configure available models for each provider.</p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="text-center">
        <div class="text-3xl font-bold">{{ models|length }}</div>
        <div class="text-green-100 text-sm">Total Models</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ models|selectattr('enabled')|list|length }}</div>
        <div class="text-green-100 text-sm">Enabled</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ models|selectattr('supports_streaming')|list|length }}</div>
        <div class="text-green-100 text-sm">Streaming</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ models|selectattr('supports_function_calling')|list|length }}</div>
        <div class="text-green-100 text-sm">Function Calling</div>
      </div>
    </div>
  </div>

  <!-- Filter and Add -->
  <div class="flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by Provider:</label>
      <select id="provider-filter" data-action-change="filterModelsByProvider"
        class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        <option value="">All Providers</option>
        {% for provider in providers %}
        {% if provider.id == selected_provider_id %}
        <option value="{{ provider.id }}" selected>{{ provider.name }}</option>
        {% else %}
        <option value="{{ provider.id }}">{{ provider.name }}</option>
        {% endif %}
        {% endfor %}
      </select>
    </div>
    <button data-action-click="showAddModelModal"
      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-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 Model
    </button>
  </div>

  <!-- Models 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">
              Model</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">
              Provider</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">
              Capabilities</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">
              Context</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-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="models-table-body">
          {% for model in models %}
          <tr id="model-row-{{ model.id }}" class="hover:bg-gray-50 dark:hover:bg-gray-700">
            <td class="px-6 py-4 whitespace-nowrap">
              <div>
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ model.model_name }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ model.model_id }}</div>
                {% if model.model_alias %}
                <div class="text-xs text-indigo-600 dark:text-indigo-400">Alias: {{ model.model_alias }}</div>
                {% endif %}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">{{ model.provider_name }}</div>
              <div class="text-xs text-gray-500 dark:text-gray-400">{{ model.provider_type }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex flex-wrap gap-1">
                {% if model.supports_chat %}
                <span
                  class="px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Chat</span>
                {% endif %}
                {% if model.supports_streaming %}
                <span
                  class="px-2 py-0.5 text-xs font-medium rounded bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">Stream</span>
                {% endif %}
                {% if model.supports_function_calling %}
                <span
                  class="px-2 py-0.5 text-xs font-medium rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">Functions</span>
                {% endif %}
                {% if model.supports_vision %}
                <span
                  class="px-2 py-0.5 text-xs font-medium rounded bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">Vision</span>
                {% endif %}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              {% if model.context_window %}
              {{ (model.context_window / 1000)|round|int }}K
              {% else %}
              -
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center space-x-2">
                <button data-action-click="toggleLLMModel" data-arg0="{{ model.id|tojson_attr }}" class="focus:outline-none"
                  hx-post="{{ root_path }}/admin/llm/models/{{ model.id }}/state" hx-target="#model-row-{{ model.id }}"
                  hx-swap="outerHTML">
                  {% if model.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>
                {% if model.deprecated %}
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                  Deprecated
                </span>
                {% endif %}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button data-action-click="editLLMModel" data-arg0="{{ model.id|tojson_attr }}"
                class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3"
                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 data-action-click="deleteLLMModel" data-arg0="{{ model.id|tojson_attr }}" data-arg1="{{ model.model_name|tojson_attr }}"
                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="6" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No models configured</h3>
              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Add models to your configured providers.</p>
              <div class="mt-6">
                <button data-action-click="showAddModelModal"
                  class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-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 Model
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
