{{define "content"}}
<section class="space-y-6">
  <h1 class="text-3xl font-bold text-gray-900" data-i18n="audit.title">Audit Logs</h1>

  <div class="mb-4 border-b border-gray-200">
    <ul class="-mb-px flex flex-wrap text-center text-sm font-medium" id="audit-tab" data-tabs-toggle="#audit-tab-content" role="tablist">
      <li class="me-2" role="presentation">
        <button class="inline-block rounded-t-lg border-b-2 p-4" id="activity-tab" data-tabs-target="#activity" type="button" role="tab" aria-controls="activity" aria-selected="true" data-i18n="audit.activity">Activity</button>
      </li>
      <li class="me-2" role="presentation">
        <button class="inline-block rounded-t-lg border-b-2 p-4" id="security-tab" data-tabs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false" data-i18n="audit.security">Security</button>
      </li>
    </ul>
  </div>

  <div id="audit-tab-content">
    <div class="hidden rounded-lg border border-gray-200 bg-white p-4 shadow-sm" id="activity" role="tabpanel" aria-labelledby="activity-tab">
      <div class="relative overflow-x-auto">
        <table class="w-full text-left text-sm text-gray-500">
          <thead class="bg-gray-50 text-xs uppercase text-gray-700">
            <tr>
              <th class="px-6 py-3" data-i18n="audit.timestamp">Timestamp</th>
              <th class="px-6 py-3" data-i18n="audit.actor">Actor</th>
              <th class="px-6 py-3" data-i18n="audit.action">Action</th>
            </tr>
          </thead>
          <tbody><tr class="border-b bg-white"><td class="px-6 py-4">-</td><td class="px-6 py-4">-</td><td class="px-6 py-4">-</td></tr></tbody>
        </table>
      </div>
    </div>
    <div class="hidden rounded-lg border border-gray-200 bg-white p-4 shadow-sm" id="security" role="tabpanel" aria-labelledby="security-tab">
      <p class="text-sm text-gray-600" data-i18n="audit.placeholder">Security logs placeholder.</p>
    </div>
  </div>
</section>
{{end}}