<!-- htmlhint doctype-first:false -->
<!-- Performance Dashboard with Tabs and Auto-refresh -->
<div x-data="{
  activeTab: 'overview',
  autoRefresh: true,
  refreshInterval: 5000
}" class="space-y-6">
  <!-- Header with Refresh Controls -->
  <div class="flex flex-wrap items-center justify-between gap-4">
    <div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Performance Monitor</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
        Host: <span class="font-mono">{{ dashboard.host }}</span> |
        Uptime: {{ "{:,}".format(dashboard.uptime_seconds // 3600) }}h {{ (dashboard.uptime_seconds % 3600) // 60 }}m
      </p>
    </div>
    <div class="flex items-center gap-3">
      <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <input type="checkbox" x-model="autoRefresh" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
        Auto-refresh
      </label>
      <button
        hx-get="{{ root_path }}/admin/performance/stats"
        hx-target="#performance-panel"
        hx-swap="innerHTML"
        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors">
        <svg class="w-4 h-4 mr-1.5" 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>
        Refresh
      </button>
    </div>
  </div>

  <!-- Tab Navigation -->
  <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="flex flex-wrap -mb-px text-sm font-medium" aria-label="Performance Tabs">
      <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        Overview
      </button>
      <button @click="activeTab = 'system'" :class="activeTab === 'system' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        System
      </button>
      <button @click="activeTab = 'workers'" :class="activeTab === 'workers' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        Workers
      </button>
      <button @click="activeTab = 'requests'" :class="activeTab === 'requests' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        Requests
      </button>
      <button @click="activeTab = 'database'" :class="activeTab === 'database' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        Database
      </button>
      <button @click="activeTab = 'cache'" :class="activeTab === 'cache' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'" class="py-3 px-4 border-b-2 transition-colors">
        Cache
      </button>
    </nav>
  </div>

  <!-- Overview Tab -->
  <div x-show="activeTab === 'overview'" x-transition>
    <!-- Key Metrics Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
      <!-- CPU -->
      <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-2xl font-bold text-blue-900 dark:text-blue-100">{{ "%.1f"|format(dashboard.system.cpu_percent) }}%</div>
            <div class="text-sm text-blue-700 dark:text-blue-300 mt-1">CPU Usage</div>
          </div>
          <div class="text-3xl">💻</div>
        </div>
        <div class="mt-2 w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2">
          <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all" style="width: {{ dashboard.system.cpu_percent }}%"></div>
        </div>
        <div class="text-xs text-blue-600 dark:text-blue-400 mt-2">{{ dashboard.system.cpu_count }} cores</div>
      </div>

      <!-- Memory -->
      <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-2xl font-bold text-green-900 dark:text-green-100">{{ "%.1f"|format(dashboard.system.memory_percent) }}%</div>
            <div class="text-sm text-green-700 dark:text-green-300 mt-1">Memory</div>
          </div>
          <div class="text-3xl">🧠</div>
        </div>
        <div class="mt-2 w-full bg-green-200 dark:bg-green-700 rounded-full h-2">
          <div class="bg-green-600 dark:bg-green-400 h-2 rounded-full transition-all" style="width: {{ dashboard.system.memory_percent }}%"></div>
        </div>
        <div class="text-xs text-green-600 dark:text-green-400 mt-2">{{ "{:,}".format(dashboard.system.memory_used_mb) }} / {{ "{:,}".format(dashboard.system.memory_total_mb) }} MB</div>
      </div>

      <!-- Workers -->
      <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-2xl font-bold text-purple-900 dark:text-purple-100">{{ dashboard.gunicorn.workers_active }}/{{ dashboard.gunicorn.workers_total }}</div>
            <div class="text-sm text-purple-700 dark:text-purple-300 mt-1">Workers</div>
          </div>
          <div class="text-3xl">👷</div>
        </div>
        <div class="mt-2 w-full bg-purple-200 dark:bg-purple-700 rounded-full h-2">
          {% set worker_pct = (dashboard.gunicorn.workers_active / dashboard.gunicorn.workers_total * 100) if dashboard.gunicorn.workers_total > 0 else 0 %}
          <div class="bg-purple-600 dark:bg-purple-400 h-2 rounded-full transition-all" style="width: {{ worker_pct }}%"></div>
        </div>
        <div class="text-xs text-purple-600 dark:text-purple-400 mt-2">{{ dashboard.gunicorn.workers_idle }} idle</div>
      </div>

      <!-- Request Rate -->
      <div class="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 rounded-lg p-4 border border-orange-200 dark:border-orange-800">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-2xl font-bold text-orange-900 dark:text-orange-100">{{ "%.1f"|format(dashboard.requests.requests_per_second) }}</div>
            <div class="text-sm text-orange-700 dark:text-orange-300 mt-1">Req/sec</div>
          </div>
          <div class="text-3xl">🚀</div>
        </div>
        <div class="text-xs text-orange-600 dark:text-orange-400 mt-4">{{ "{:,}".format(dashboard.requests.requests_total) }} total requests</div>
      </div>
    </div>

    <!-- Response Time and Error Rate -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Response Time Percentiles -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Time (ms)</h4>
        <div class="space-y-3">
          {% set max_rt = [dashboard.requests.response_time_p99_ms, 1] | max %}
          <div class="flex items-center">
            <span class="w-16 text-sm text-gray-600 dark:text-gray-400">Avg</span>
            <div class="flex-1 mx-3">
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                {% set avg_width = [dashboard.requests.response_time_avg_ms / max_rt * 100, 100] | min %}
                <div class="bg-blue-500 h-3 rounded-full" style="width: {{ avg_width }}%"></div>
              </div>
            </div>
            <span class="w-20 text-right font-mono text-sm text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.requests.response_time_avg_ms) }}</span>
          </div>
          <div class="flex items-center">
            <span class="w-16 text-sm text-gray-600 dark:text-gray-400">P50</span>
            <div class="flex-1 mx-3">
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                {% set p50_width = [dashboard.requests.response_time_p50_ms / max_rt * 100, 100] | min %}
                <div class="bg-green-500 h-3 rounded-full" style="width: {{ p50_width }}%"></div>
              </div>
            </div>
            <span class="w-20 text-right font-mono text-sm text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.requests.response_time_p50_ms) }}</span>
          </div>
          <div class="flex items-center">
            <span class="w-16 text-sm text-gray-600 dark:text-gray-400">P95</span>
            <div class="flex-1 mx-3">
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                {% set p95_width = [dashboard.requests.response_time_p95_ms / max_rt * 100, 100] | min %}
                <div class="bg-yellow-500 h-3 rounded-full" style="width: {{ p95_width }}%"></div>
              </div>
            </div>
            <span class="w-20 text-right font-mono text-sm text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.requests.response_time_p95_ms) }}</span>
          </div>
          <div class="flex items-center">
            <span class="w-16 text-sm text-gray-600 dark:text-gray-400">P99</span>
            <div class="flex-1 mx-3">
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                {% set p99_width = [dashboard.requests.response_time_p99_ms / max_rt * 100, 100] | min %}
                <div class="bg-red-500 h-3 rounded-full" style="width: {{ p99_width }}%"></div>
              </div>
            </div>
            <span class="w-20 text-right font-mono text-sm text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.requests.response_time_p99_ms) }}</span>
          </div>
        </div>
      </div>

      <!-- HTTP Status Distribution -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">HTTP Status Distribution</h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400 flex items-center">
              <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> 2xx Success
            </span>
            <span class="font-semibold text-green-600 dark:text-green-400">{{ "{:,}".format(dashboard.requests.requests_2xx) }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400 flex items-center">
              <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> 3xx Redirect
            </span>
            <span class="font-semibold text-blue-600 dark:text-blue-400">{{ "{:,}".format(dashboard.requests.requests_3xx) }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400 flex items-center">
              <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span> 4xx Client Error
            </span>
            <span class="font-semibold text-yellow-600 dark:text-yellow-400">{{ "{:,}".format(dashboard.requests.requests_4xx) }}</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400 flex items-center">
              <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> 5xx Server Error
            </span>
            <span class="font-semibold text-red-600 dark:text-red-400">{{ "{:,}".format(dashboard.requests.requests_5xx) }}</span>
          </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
          <div class="flex justify-between items-center">
            <span class="text-gray-600 dark:text-gray-400">Error Rate</span>
            <span class="font-bold {% if dashboard.requests.error_rate > 5 %}text-red-600 dark:text-red-400{% elif dashboard.requests.error_rate > 1 %}text-yellow-600 dark:text-yellow-400{% else %}text-green-600 dark:text-green-400{% endif %}">
              {{ "%.2f"|format(dashboard.requests.error_rate) }}%
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- System Tab -->
  <div x-show="activeTab === 'system'" x-transition>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- CPU Details -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">💻</span> CPU
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Usage</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.system.cpu_percent) }}%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Cores</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ dashboard.system.cpu_count }}</span>
          </div>
          {% if dashboard.system.cpu_freq_mhz %}
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Frequency</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.cpu_freq_mhz|int) }} MHz</span>
          </div>
          {% endif %}
          {% if dashboard.system.load_avg_1m is not none %}
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Load Avg (1m)</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.system.load_avg_1m) }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Load Avg (5m)</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.system.load_avg_5m) }}</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">Load Avg (15m)</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.system.load_avg_15m) }}</span>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Memory Details -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">🧠</span> Memory
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Usage</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.system.memory_percent) }}%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Used</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.memory_used_mb) }} MB</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Available</span>
            <span class="font-semibold text-green-600 dark:text-green-400">{{ "{:,}".format(dashboard.system.memory_available_mb) }} MB</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Total</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.memory_total_mb) }} MB</span>
          </div>
          {% if dashboard.system.swap_total_mb > 0 %}
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">Swap Used</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.swap_used_mb) }} / {{ "{:,}".format(dashboard.system.swap_total_mb) }} MB</span>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Disk Details -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">💾</span> Disk
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Usage</span>
            <span class="font-semibold {% if dashboard.system.disk_percent > 90 %}text-red-600 dark:text-red-400{% elif dashboard.system.disk_percent > 75 %}text-yellow-600 dark:text-yellow-400{% else %}text-gray-900 dark:text-gray-100{% endif %}">{{ "%.1f"|format(dashboard.system.disk_percent) }}%</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Used</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.system.disk_used_gb) }} GB</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">Total</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.system.disk_total_gb) }} GB</span>
          </div>
        </div>
        <div class="mt-4 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
          <div class="{% if dashboard.system.disk_percent > 90 %}bg-red-500{% elif dashboard.system.disk_percent > 75 %}bg-yellow-500{% else %}bg-blue-500{% endif %} h-3 rounded-full" style="width: {{ dashboard.system.disk_percent }}%"></div>
        </div>
      </div>

      <!-- Network Details -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">🌐</span> Network
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Bytes Sent</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.network_bytes_sent // 1048576) }} MB</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Bytes Received</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.network_bytes_recv // 1048576) }} MB</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">Active Connections</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.system.network_connections) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Workers Tab -->
  <div x-show="activeTab === 'workers'" x-transition>
    <!-- Gunicorn Summary -->
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mb-4">
      <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
        <span class="text-2xl mr-2">👷</span> Gunicorn Status
      </h4>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="text-center">
          <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ dashboard.gunicorn.workers_total }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Total Workers</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ dashboard.gunicorn.workers_active }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Active</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-gray-500 dark:text-gray-400">{{ dashboard.gunicorn.workers_idle }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Idle</div>
        </div>
        {% if dashboard.gunicorn.master_pid %}
        <div class="text-center">
          <div class="text-2xl font-bold font-mono text-gray-900 dark:text-gray-100">{{ dashboard.gunicorn.master_pid }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Master PID</div>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Worker Details Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100">Worker Processes</h4>
      </div>
      <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 class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">PID</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CPU %</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Memory</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Threads</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Connections</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Uptime</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            {% for worker in dashboard.workers %}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-gray-100">{{ worker.pid }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <span class="{% if worker.cpu_percent > 80 %}text-red-600 dark:text-red-400{% elif worker.cpu_percent > 50 %}text-yellow-600 dark:text-yellow-400{% else %}text-gray-900 dark:text-gray-100{% endif %}">
                  {{ "%.1f"|format(worker.cpu_percent) }}%
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ "%.1f"|format(worker.memory_rss_mb) }} MB</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ worker.threads }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ worker.connections }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if worker.status == 'running' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% elif worker.status == 'sleeping' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200{% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300{% endif %}">
                  {{ worker.status }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {% if worker.uptime_seconds %}
                {{ worker.uptime_seconds // 3600 }}h {{ (worker.uptime_seconds % 3600) // 60 }}m
                {% else %}
                -
                {% endif %}
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">No worker data available</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Requests Tab -->
  <div x-show="activeTab === 'requests'" x-transition>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Request Statistics -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">📈</span> Request Statistics
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Total Requests</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.requests.requests_total) }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Requests/Second</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.requests.requests_per_second) }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Active Requests</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ dashboard.requests.active_requests }}</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">Error Rate</span>
            <span class="font-semibold {% if dashboard.requests.error_rate > 5 %}text-red-600 dark:text-red-400{% elif dashboard.requests.error_rate > 1 %}text-yellow-600 dark:text-yellow-400{% else %}text-green-600 dark:text-green-400{% endif %}">
              {{ "%.2f"|format(dashboard.requests.error_rate) }}%
            </span>
          </div>
        </div>
      </div>

      <!-- Response Time Details -->
      <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
          <span class="text-2xl mr-2">⏱️</span> Response Times
        </h4>
        <div class="space-y-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">Average</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.requests.response_time_avg_ms) }} ms</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">P50 (Median)</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.requests.response_time_p50_ms) }} ms</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
            <span class="text-gray-600 dark:text-gray-400">P95</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.requests.response_time_p95_ms) }} ms</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 dark:text-gray-400">P99</span>
            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ "%.2f"|format(dashboard.requests.response_time_p99_ms) }} ms</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Database Tab -->
  <div x-show="activeTab === 'database'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
      <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
        <span class="text-2xl mr-2">🗄️</span> Database Connection Pool
      </h4>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ dashboard.database.pool_size }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Pool Size</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ dashboard.database.connections_available }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Available</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ dashboard.database.connections_in_use }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">In Use</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{ dashboard.database.overflow }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Overflow</div>
        </div>
      </div>

      <!-- Connection Pool Visualization -->
      <div class="mb-4">
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Pool Utilization</div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
          {% set pool_pct = (dashboard.database.connections_in_use / dashboard.database.pool_size * 100) if dashboard.database.pool_size > 0 else 0 %}
          <div class="{% if pool_pct > 80 %}bg-red-500{% elif pool_pct > 50 %}bg-yellow-500{% else %}bg-green-500{% endif %} h-4 rounded-full transition-all" style="width: {{ pool_pct }}%"></div>
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ "%.1f"|format(pool_pct) }}% utilized</div>
      </div>
    </div>
  </div>

  <!-- Cache Tab -->
  <div x-show="activeTab === 'cache'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
      <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
        <span class="text-2xl mr-2">🔴</span> Redis Cache
      </h4>

      {% if dashboard.cache.connected %}
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="text-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
          <div class="flex items-center justify-center mb-2">
            <span class="w-3 h-3 bg-green-500 rounded-full animate-pulse mr-2"></span>
            <span class="text-green-700 dark:text-green-300 font-medium">Connected</span>
          </div>
          <div class="text-xs text-green-600 dark:text-green-400">v{{ dashboard.cache.version or 'N/A' }}</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ "%.1f"|format(dashboard.cache.used_memory_mb) }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Memory (MB)</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ "{:,}".format(dashboard.cache.ops_per_second) }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Ops/sec</div>
        </div>
        <div class="text-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
          <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ dashboard.cache.connected_clients }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Clients</div>
        </div>
      </div>

      <!-- Hit Rate -->
      <div class="mb-4">
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
          <span>Cache Hit Rate</span>
          <span class="font-medium">{{ "%.1f"|format(dashboard.cache.hit_rate) }}%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
          <div class="{% if dashboard.cache.hit_rate > 80 %}bg-green-500{% elif dashboard.cache.hit_rate > 50 %}bg-yellow-500{% else %}bg-red-500{% endif %} h-4 rounded-full transition-all" style="width: {{ dashboard.cache.hit_rate }}%"></div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 text-sm">
        <div class="flex justify-between py-2 border-b border-gray-100 dark:border-gray-700">
          <span class="text-gray-600 dark:text-gray-400">Keyspace Hits</span>
          <span class="font-semibold text-green-600 dark:text-green-400">{{ "{:,}".format(dashboard.cache.keyspace_hits) }}</span>
        </div>
        <div class="flex justify-between py-2 border-b border-gray-100 dark:border-gray-700">
          <span class="text-gray-600 dark:text-gray-400">Keyspace Misses</span>
          <span class="font-semibold text-red-600 dark:text-red-400">{{ "{:,}".format(dashboard.cache.keyspace_misses) }}</span>
        </div>
      </div>
      {% else %}
      <div class="text-center py-8">
        <div class="flex items-center justify-center mb-4">
          <span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span>
          <span class="text-gray-500 dark:text-gray-400 font-medium">Not Connected</span>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Redis cache is not configured or unavailable.</p>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">Configure REDIS_URL to enable caching.</p>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Auto-refresh mechanism -->
  <div x-show="autoRefresh" x-init="
    setInterval(() => {
      if (autoRefresh) {
        htmx.trigger('#performance-panel', 'refresh');
      }
    }, refreshInterval);
  " class="hidden"></div>
</div>
