<!-- 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">Actions</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-36">Source</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-24">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 w-20">Tags</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-20">Owner</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-20">Team</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-20">Status</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 %}
      {% set can_modify = is_admin or resource.ownerEmail == current_user_email or (resource.visibility == 'team' and resource.teamId and user_team_roles.get(resource.teamId|string) == 'owner') %}
      <tr data-enabled="{{ resource.enabled|lower }}" data-owner-email="{{ resource.ownerEmail }}" data-team-id="{{ resource.teamId or '' }}" data-visibility="{{ resource.visibility }}">
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="relative"
                     x-data="window.Admin?.overflowMenu?.('resources-table-wrapper')"
               @click.away="menuOpen = false"
               @keydown.escape="menuOpen = false; $refs.trigger.focus()">
                  <button
                    type="button"
                    x-ref="trigger"
                    @click="menuOpen ? (menuOpen = false) : openMenu()"
                    class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 transition-colors"
                    :aria-expanded="menuOpen"
                    aria-haspopup="menu"
                    aria-label="Actions"
                    x-tooltip="'Actions'"
                  >
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zm6 0a2 2 0 11-4 0 2 2 0 014 0zm6 0a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                  </button>
                  <!-- Dropdown menu (fixed-positioned to escape overflow/scroll containers) -->
                  <div
                    x-ref="menu"
                    x-cloak
                    x-show="menuOpen"
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    class="fixed w-44 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 py-1"
                    :style="`top: ${menuTop}px; left: ${menuLeft}px; display: ${menuOpen ? 'block' : 'none'}`"
                    role="menu"
                    aria-orientation="vertical"
                    @keydown.arrow-down.prevent="navigate(1)"
                    @keydown.arrow-up.prevent="navigate(-1)"
                  >              <button
                type="button"
                role="menuitem"
                tabindex="0"
                @click="menuOpen = false; window.Admin?.testResource?.({{ resource.id|tojson_attr }})"
                class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
              >Test</button>
              <button
                type="button"
                role="menuitem"
                tabindex="0"
                @click="menuOpen = false; window.Admin?.viewResource?.({{ resource.id|tojson_attr }})"
                class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
              >View</button>
              {% if can_modify %}
              <button
                type="button"
                role="menuitem"
                tabindex="0"
                @click="menuOpen = false; window.Admin?.editResource?.({{ resource.id|tojson_attr }})"
                class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
              >Edit</button>
              <hr class="border-gray-200 dark:border-gray-600 my-1">
              {% if resource.enabled %}
              <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/state" class="contents" @submit="menuOpen = false" data-action-submit="handleToggleSubmit" data-arg0="resources">
                <input type="hidden" name="activate" value="false" />
                <button
                  type="submit"
                  role="menuitem"
                  tabindex="0"
                  class="w-full flex items-center px-4 py-2 text-sm text-yellow-600 dark:text-yellow-400 hover:bg-gray-100 dark:hover:bg-gray-700"
                >Deactivate</button>
              </form>
              {% else %}
              <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/state" class="contents" @submit="menuOpen = false" data-action-submit="handleToggleSubmit" data-arg0="resources">
                <input type="hidden" name="activate" value="true" />
                <button
                  type="submit"
                  role="menuitem"
                  tabindex="0"
                  class="w-full flex items-center px-4 py-2 text-sm text-green-600 dark:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700"
                >Activate</button>
              </form>
              {% endif %}
              <form method="POST" action="{{ root_path }}/admin/resources/{{ resource.id }}/delete" class="contents" @submit="menuOpen = false" data-action-submit="handleDeleteSubmit" data-arg0="resource" data-arg1="{{ (resource.name or resource.uri)|tojson_attr }}" data-arg2="resources">
                <button
                  type="submit"
                  role="menuitem"
                  tabindex="0"
                  class="w-full flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700"
                >Delete</button>
              </form>
              {% endif %}
            </div>
          </div>
        </td>
        <td class="px-6 py-4 text-sm w-36">
          <div class="font-medium text-gray-900 dark:text-gray-100">{{ resource.id }}</div>
          <div class="text-xs text-gray-500 dark:text-gray-400 break-words">{{ resource.uri }}</div>
        </td>
        <td class="px-6 py-4 whitespace-normal break-words text-sm font-medium text-gray-900 dark:text-gray-100 w-24">
          <div>{{ resource.name }}</div>
          {% if resource.title %}
          <div class="text-xs text-gray-500 dark:text-gray-400 font-normal">{{ resource.title }}</div>
          {% endif %}
        </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') | decode_html }}</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" data-tag="{% if tag is mapping %}{{ tag.id }}{% else %}{{ tag }}{% endif %}">{% if tag is mapping %}{{ tag.id }}{% else %}{{ tag }}{% endif %}</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 text-sm text-gray-500 dark:text-gray-300 w-20">{% if resource.ownerEmail %}{{ resource.ownerEmail }}{% else %}<span class="text-gray-400 dark:text-gray-600 text-xs">None</span>{% endif %}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">{% if resource.team %}{{ resource.team }}{% else %}<span class="text-gray-400 dark:text-gray-600 text-xs">None</span>{% endif %}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm w-20">
          <div class="flex flex-col gap-1">
            <!-- MIME Type badge -->
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 w-fit">{{ resource.mimeType or 'N/A' }}</span>
            <!-- Visibility badge -->
            {% if 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 dark:bg-green-900 dark:text-green-200 w-fit">🌍 Public</span>
            {% elif resource.visibility == 'team' %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 w-fit">👥 Team</span>
            {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 w-fit">🔒 Private</span>
            {% endif %}
            <!-- Status badge -->
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium w-fit {% if resource.enabled %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %}">
              {% if resource.enabled %}● Active{% else %}● Inactive{% endif %}
            </span>
          </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_swap = 'outerHTML' %}
  {% set hx_indicator = '#resources-loading' %}
  {% set table_name = 'resources' %}
  {% set query_params = query_params if query_params is defined else {'include_inactive': include_inactive} %}
  {% include 'pagination_controls.html' %}
</div>
