<!-- htmlhint doctype-first:false -->
<table id="resources-table" class="min-w-full divide-y divide-gray-200">
  <thead class="bg-gray-50 dark:bg-gray-700">
    <tr>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">URI</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">MIME Type</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tags</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Owner</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Team</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Visibility</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
    </tr>
  </thead>
  <tbody id="resources-table-body" class="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
  {% for resource in data %}
  <tr>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">{{ resource.id }}</td>
    <td class="px-6 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300">{{ resource.uri }}</td>
    <td class="px-6 py-4 whitespace-normal break-words text-sm font-medium text-gray-900 dark:text-gray-100">{{ resource.name }}</td>
    <td class="px-6 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300">{{ resource.description or 'N/A' }}</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-500">{{ resource.mimeType or 'N/A' }}</td>
    <td class="px-6 py-4 whitespace-nowrap">{% if resource.tags %}{% for tag in resource.tags %}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1 mb-1">{{ tag.id }}</span>{% endfor %}{% else %}<span class="text-gray-500 dark:text-gray-300 text-xs">None</span>{% endif %}</td>
    <td class="px-6 py-4 whitespace-nowrap">{% if resource.ownerEmail %}<span class="text-sm text-gray-900 dark:text-gray-100">{{ resource.ownerEmail }}</span>{% else %}<span class="text-gray-500 dark:text-gray-300 text-xs">N/A</span>{% endif %}</td>
    <td class="px-2 py-4 whitespace-nowrap">{% if resource.team %}<span class="text-sm text-gray-900 dark:text-gray-100">{{ resource.team.replace(' ', '<br />')|safe }}</span>{% else %}<span class="text-gray-500 dark:text-gray-300 text-xs">N/A</span>{% endif %}</td>
    <td class="px-6 py-4 whitespace-nowrap">{% if resource.visibility == 'private' %}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Private</span>{% elif resource.visibility == 'team' %}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Team</span>{% elif resource.visibility == 'public' %}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Public</span>{% else %}<span class="text-gray-500 dark:text-gray-300 text-xs">N/A</span>{% endif %}</td>
    <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {% if resource.enabled %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">{{ 'Active' if resource.enabled else 'Inactive' }}</span></td>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
      <div class="grid grid-cols-2 gap-x-2 gap-y-1 max-w-48">
        <button onclick="testResource('{{ resource.id }}')" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-indigo-600 hover:text-indigo-900 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20 transition-colors">Test</button>
        <button onclick="viewResource('{{ resource.id }}')" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-indigo-600 hover:text-indigo-900 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20 transition-colors">View</button>
        <button onclick="editResource('{{ resource.id }}')" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-green-600 hover:text-green-900 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20 transition-colors">Edit</button>
        <div class="col-span-2 flex flex-col space-y-1">
          {% if resource.enabled %}
          <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/toggle" class="contents" onsubmit="return handleToggleSubmit(event, 'resources')">
            <input type="hidden" name="activate" value="false" />
            <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20 transition-colors">Deactivate</button>
          </form>
          {% else %}
          <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/toggle" class="contents" onsubmit="return handleToggleSubmit(event, 'resources')">
            <input type="hidden" name="activate" value="true" />
            <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-blue-600 hover:text-blue-900 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20 transition-colors">Activate</button>
          </form>
          {% endif %}
          <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/delete" class="contents" onsubmit="return handleSubmitWithConfirmation(event, 'resources')">
            <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-red-600 hover:text-red-900 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 transition-colors">Delete</button>
          </form>
        </div>
      </div>
    </td>
  </tr>
  {% endfor %}
  </tbody>
</table>

<!-- Out-of-band swap for pagination controls -->
<div id="resources-pagination-controls" hx-swap-oob="true">
  {% set base_url = root_path + '/admin/resources/partial' %}
  {% set hx_target = '#resources-table' %}
  {% set hx_indicator = '#resources-loading' %}
  {% set query_params = {'include_inactive': include_inactive} %}
  {% include 'pagination_controls.html' %}
</div>
