{% load tz %}
<div class="space-y-4">
  <details class="rounded-xl border border-gray-200 bg-gray-50" {% if panel.filters_expanded %}open{% endif %}>
    <summary class="flex cursor-pointer items-center justify-between px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-600">
      <span>Filters</span>
      <span class="rounded-full bg-white px-2 py-0.5 text-[11px] font-semibold text-gray-700">Matches: {{ panel.filtered_count }}</span>
    </summary>
    <div class="border-t border-gray-200 bg-white p-4">
      <form method="get" action="{{ panel.panel_action }}" class="js-audit-panel-form grid gap-3 md:grid-cols-4">
        <input type="hidden" name="line_limit" value="{{ panel.filter_values.line_limit }}" />
        <input type="hidden" name="login_outcome" value="{{ panel.filter_values.login_outcome }}" />
        <input type="hidden" name="http_status" value="{{ panel.filter_values.http_status }}" />
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Source type</label>
          <select name="source_kind" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700">
            <option value="">All</option>
            {% for option in panel.filter_options.source_kinds %}
              {% if option %}
                <option value="{{ option }}" {% if panel.filter_values.source_kind == option %}selected{% endif %}>{{ option }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Source</label>
          <select name="source_name" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700">
            <option value="">All</option>
            {% for option in panel.filter_options.source_names %}
              {% if option %}
                <option value="{{ option }}" {% if panel.filter_values.source_name == option %}selected{% endif %}>{{ option }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Category</label>
          <select name="category" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700">
            <option value="">All</option>
            {% for option in panel.filter_options.categories %}
              <option value="{{ option }}" {% if panel.filter_values.category == option %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Event type</label>
          <select name="event_type" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700">
            <option value="">All</option>
            {% for option in panel.filter_options.event_types %}
              <option value="{{ option }}" {% if panel.filter_values.event_type == option %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Priority</label>
          <select name="priority" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700">
            <option value="">All</option>
            {% for option in panel.filter_options.priorities %}
              {% if option %}
                <option value="{{ option }}" {% if panel.filter_values.priority == option %}selected{% endif %}>{{ option }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Username</label>
          <input name="username" type="text" value="{{ panel.filter_values.username }}" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700" />
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Source IP</label>
          <input name="source_ip" type="text" value="{{ panel.filter_values.source_ip }}" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700" />
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Search</label>
          <input name="q" type="text" value="{{ panel.filter_values.q }}" placeholder="message, principal, source" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700" />
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Since</label>
          <input name="since" type="datetime-local" value="{{ panel.filter_values.since }}" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700" />
        </div>
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-500">Until</label>
          <input name="until" type="datetime-local" value="{{ panel.filter_values.until }}" class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-700" />
        </div>
        <div class="md:col-span-4 flex items-center justify-end gap-2">
          <button type="submit" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-800">Apply</button>
          <a href="{{ panel.reset_href }}" class="js-panel-link inline-flex items-center rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50">Reset</a>
        </div>
      </form>
    </div>
  </details>

  {% if panel.logs %}
    <div class="overflow-x-auto rounded-xl border border-gray-200">
      <table class="min-w-full divide-y divide-gray-200 text-xs">
        <thead class="bg-gray-50 text-left uppercase tracking-wide text-gray-500">
          <tr>
            <th class="px-3 py-2 font-semibold">Time</th>
            <th class="px-3 py-2 font-semibold">Source</th>
            <th class="px-3 py-2 font-semibold">Log line</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 text-gray-700">
          {% for log in panel.logs %}
            <tr class="align-top">
              <td class="whitespace-nowrap px-3 py-2 text-gray-500">{{ log.event_at|utc|date:"Y-m-d H:i:s" }} UTC</td>
              <td class="px-3 py-2">
                <div class="font-medium text-gray-900">{{ log.compact_source }}</div>
                <div class="text-gray-500">{{ log.event_type }} • {{ log.category }}{% if log.source_kind %} • {{ log.source_kind }}{% endif %}</div>
              </td>
              <td class="px-3 py-2">
                <div class="font-mono text-[11px] text-gray-900">{{ log.compact_line }}</div>
                {% if log.username or log.source_ip or log.session_id %}
                  <div class="mt-1 text-gray-500">
                    {% if log.username %}user={{ log.username }}{% endif %}
                    {% if log.source_ip %}{% if log.username %} • {% endif %}ip={{ log.source_ip }}{% endif %}
                    {% if log.session_id %}{% if log.username or log.source_ip %} • {% endif %}session={{ log.session_id }}{% endif %}
                  </div>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="flex items-center justify-between text-xs text-gray-600">
      <span>Page {{ panel.page_obj.number }} of {{ panel.page_obj.paginator.num_pages }}</span>
      <div class="flex items-center gap-2">
        {% if panel.page_obj.has_previous %}
          <a href="{{ panel.panel_action }}?{% if panel.query_without_page %}{{ panel.query_without_page }}&{% endif %}page={{ panel.page_obj.previous_page_number }}" class="js-panel-link rounded border border-gray-200 px-2.5 py-1 hover:bg-gray-50">Previous</a>
        {% endif %}
        {% if panel.page_obj.has_next %}
          <a href="{{ panel.panel_action }}?{% if panel.query_without_page %}{{ panel.query_without_page }}&{% endif %}page={{ panel.page_obj.next_page_number }}" class="js-panel-link rounded border border-gray-200 px-2.5 py-1 hover:bg-gray-50">Next</a>
        {% endif %}
      </div>
    </div>
  {% else %}
    <div class="rounded-xl border border-dashed border-gray-200 bg-gray-50 p-6 text-center">
      <h4 class="text-sm font-semibold text-gray-900">No logs for this panel filter</h4>
      <p class="mt-1 text-xs text-gray-500">Adjust source/file/service filters or broaden the timeframe.</p>
    </div>
  {% endif %}
</div>