{{ define "logs_title" }}Recent Logs{{ end }}
{{ define "logs_content" }}
<h1 class="text-2xl font-semibold text-white mb-4">Recent Logs</h1>
<div class="overflow-x-auto">
  <table class="min-w-full divide-y divide-gray-700">
    <thead class="bg-gray-800">
      <tr>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Time</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Remote</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Service</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Details</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Payload</th>
      </tr>
    </thead>
    <tbody class="bg-gray-900 divide-y divide-gray-800">
      {{ range .Rows }}
      <tr>
        <td class="px-4 py-2 text-sm text-gray-300">{{ .Timestamp.Format "2006-01-02 15:04:05" }}</td>
        <td class="px-4 py-2 text-sm text-gray-300">{{ .RemoteAddr }}:{{ .RemotePort }}</td>
        <td class="px-4 py-2 text-sm text-gray-300">{{ .Service }}</td>
        <td class="px-4 py-2 text-sm text-gray-300"><pre class="whitespace-pre-wrap max-w-xs overflow-auto">{{ .Details | toJSON }}</pre></td>
        <td class="px-4 py-2 text-sm text-gray-300"><pre class="whitespace-pre-wrap max-w-xs overflow-auto">{{ .RawPayload }}</pre></td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}