{% if devices %}
<table class="w-full">
  <thead>
    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
      <th class="px-5 py-3">Device ID</th>
      <th class="px-5 py-3">Type</th>
      <th class="px-5 py-3">Status</th>
      <th class="px-5 py-3">Location</th>
      <th class="px-5 py-3">Last Seen</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-100">
    {% for device in devices %}
    <tr class="hover:bg-gray-50 cursor-pointer" onclick="toggleDetail('{{ device.device_id }}')">
      <td class="px-5 py-3">
        <div class="flex items-center gap-2">
          <svg id="chevron-{{ device.device_id }}" class="w-4 h-4 text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
          <span class="text-sm font-medium text-gray-900">{{ device.device_id }}</span>
        </div>
      </td>
      <td class="px-5 py-3">
        <span class="text-sm text-gray-600">{{ device.device_type }}</span>
      </td>
      <td class="px-5 py-3">
        {% if device.status == "available" %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
          <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1 pulse-dot"></span>
          online
        </span>
        {% else %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
          <span class="w-1.5 h-1.5 bg-gray-400 rounded-full mr-1"></span>
          {{ device.status }}
        </span>
        {% endif %}
      </td>
      <td class="px-5 py-3 text-sm text-gray-600">{{ device.location or "—" }}</td>
      <td class="px-5 py-3 text-sm text-gray-400">{{ device.last_seen or "—" }}</td>
    </tr>
    <tr id="detail-{{ device.device_id }}" class="hidden">
      <td colspan="5" class="px-5 py-4 bg-gray-50">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

          {# Capabilities: functions #}
          {% set caps = device.capabilities or {} %}
          <div>
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Functions (RPCs)</h4>
            {% if caps.functions %}
            <div class="space-y-1.5">
              {% for fn in caps.functions %}
              <div class="bg-white rounded-lg border border-gray-200 px-3 py-2">
                <code class="text-xs font-medium text-indigo-700">{{ fn.name }}({% for pname, pspec in (fn.parameters.properties or {}).items() %}{{ pname }}{% if pspec.default is defined %}={{ pspec.default | tojson }}{% endif %}{% if not loop.last %}, {% endif %}{% endfor %})</code>
                {% if fn.description %}
                <p class="text-xs text-gray-500 mt-0.5">{{ fn.description }}</p>
                {% endif %}
                <button onclick="event.stopPropagation(); openInvoke('{{ device.device_id }}', '{{ fn.name }}', {{ fn.parameters | tojson_pretty | e }})"
                        class="mt-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                  Try &rarr;
                </button>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-xs text-gray-400 italic">No RPC functions registered</p>
            {% endif %}
          </div>

          {# Capabilities: events #}
          <div>
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Events</h4>
            {% if caps.events %}
            <div class="space-y-1.5">
              {% for ev in caps.events %}
              <div class="bg-white rounded-lg border border-gray-200 px-3 py-2">
                <code class="text-xs font-medium text-green-700">{{ ev.name }}</code>
                {% if ev.description %}
                <p class="text-xs text-gray-500 mt-0.5">{{ ev.description }}</p>
                {% endif %}
                <button onclick="event.stopPropagation(); openEventLog('{{ device.device_id }}', '{{ ev.name }}')"
                        class="mt-1.5 text-xs text-green-600 hover:text-green-800 font-medium">
                  Live log &rarr;
                </button>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-xs text-gray-400 italic">No events registered</p>
            {% endif %}
          </div>

          {# Identity #}
          {% set ident = device._raw.identity or {} if device._raw else {} %}
          <div>
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Identity</h4>
            <div class="bg-white rounded-lg border border-gray-200 px-3 py-2">
              <dl class="space-y-1 text-xs">
                {% for key in ['manufacturer', 'model', 'firmware_version', 'serial_number', 'arch'] %}
                {% if ident.get(key) %}
                <div class="flex justify-between">
                  <dt class="text-gray-500">{{ key | replace('_', ' ') | title }}</dt>
                  <dd class="text-gray-900 font-medium">{{ ident[key] }}</dd>
                </div>
                {% endif %}
                {% endfor %}
              </dl>
            </div>
          </div>

        </div>

        {# Invoke panel (shown by Try button) #}
        <div id="invoke-{{ device.device_id }}" class="hidden mt-4 bg-white rounded-lg border border-indigo-200 p-4">
          <div class="flex items-center justify-between mb-3">
            <h4 class="text-xs font-semibold text-indigo-700 uppercase tracking-wider">
              Invoke <code id="invoke-fn-{{ device.device_id }}" class="text-sm normal-case"></code>
            </h4>
            <button onclick="event.stopPropagation(); closeInvoke('{{ device.device_id }}')"
                    class="text-gray-400 hover:text-gray-600 text-xs">&times; Close</button>
          </div>
          <div id="invoke-params-{{ device.device_id }}" class="space-y-2 mb-3"></div>
          <div class="flex items-center gap-3">
            <button onclick="event.stopPropagation(); submitInvoke('{{ device.device_id }}')"
                    class="px-3 py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 transition-colors">
              Run
            </button>
            <span id="invoke-status-{{ device.device_id }}" class="text-xs text-gray-400"></span>
          </div>
          <pre id="invoke-result-{{ device.device_id }}" class="hidden mt-3 bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs max-h-48 overflow-y-auto"></pre>
        </div>

        {# Event log panel (shown by Live log button) #}
        <div id="eventlog-{{ device.device_id }}" class="hidden mt-4 bg-white rounded-lg border border-green-200 p-4">
          <div class="flex items-center justify-between mb-3">
            <h4 class="text-xs font-semibold text-green-700 uppercase tracking-wider">
              <span class="inline-flex items-center">
                <span class="w-2 h-2 bg-green-400 rounded-full pulse-dot mr-1.5"></span>
                Event log: <code id="eventlog-name-{{ device.device_id }}" class="text-sm normal-case ml-1"></code>
              </span>
            </h4>
            <button onclick="event.stopPropagation(); closeEventLog('{{ device.device_id }}')"
                    class="text-gray-400 hover:text-gray-600 text-xs">&times; Close</button>
          </div>
          <div id="eventlog-entries-{{ device.device_id }}" class="space-y-1 max-h-64 overflow-y-auto text-xs">
            <p class="text-gray-400 italic">Listening for events...</p>
          </div>
        </div>

        {# Collapsible raw JSON #}
        <details class="mt-4">
          <summary class="text-xs text-gray-400 hover:text-gray-600 cursor-pointer select-none">Raw registration data</summary>
          <pre class="mt-2 bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs max-h-80 overflow-y-auto">{{ device._raw | tojson_pretty }}</pre>
        </details>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% else %}
<div class="px-5 py-8 text-center">
  <svg class="mx-auto h-10 w-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"/>
  </svg>
  <p class="mt-2 text-sm text-gray-500">No devices registered yet</p>
  <p class="text-xs text-gray-400 mt-1">Devices will appear here as they connect to the network</p>
</div>
{% endif %}