{% extends "app_home/tw4/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/tw4/_sidebar.html' %}
{% endblock %}


{% block content %}

<!-- Page title -->
<div class="mb-6">
  <h1 class="text-2xl font-bold text-gray-900">{% translate "Logs" %}</h1>
  <p class="text-sm text-gray-400 mt-1">{{ count }} {% translate "entries" %}</p>
</div>

<!-- Log table card -->
<div class="bg-white rounded-2xl shadow-sm overflow-hidden">

  <!-- Toolbar -->
  <div class="flex flex-wrap items-center gap-3 px-6 py-4 border-b border-gray-100">

    <!-- Level filter -->
    <details class="relative">
      <summary class="px-3 py-1.5 text-xs font-semibold border border-gray-300 text-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 list-none select-none">
        <i class="fa-solid fa-filter fa-fw mr-1 text-gray-400"></i>{% translate "Level" %}: {{ level }}
      </summary>
      <div class="absolute z-10 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg min-w-max py-1 text-sm">
        <a class="block px-4 py-2 text-gray-500 hover:bg-gray-50" href="{% url 'app_home:log' 'debug' %}">DEBUG</a>
        <a class="block px-4 py-2 text-blue-600 hover:bg-gray-50" href="{% url 'app_home:log' 'info' %}">INFO</a>
        <a class="block px-4 py-2 text-amber-600 hover:bg-gray-50" href="{% url 'app_home:log' 'warning' %}">WARNING</a>
        <a class="block px-4 py-2 text-red-600 hover:bg-gray-50" href="{% url 'app_home:log' 'error' %}">ERROR</a>
        <a class="block px-4 py-2 text-red-700 font-semibold hover:bg-gray-50" href="{% url 'app_home:log' 'critical' %}">CRITICAL</a>
      </div>
    </details>

    <!-- Search -->
    <form class="flex items-center gap-2" role="search" action="" method="post">
      {% csrf_token %}
      <input class="border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 w-48"
             type="search" name="query" placeholder="{% translate 'Filter…' %}" value="{{ query }}">
      <button class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition" type="submit">
        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
      </button>
    </form>

    <!-- Size selector -->
    <details class="relative">
      <summary class="px-3 py-1.5 text-xs font-semibold border border-gray-300 text-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 list-none select-none">
        {{ size }} {% translate "/ page" %}
      </summary>
      <div class="absolute z-10 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg min-w-max py-1 text-sm">
        <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50" href="{% url 'app_home:log' %}?size=50">50</a>
        <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50" href="{% url 'app_home:log' %}?size=100">100</a>
        <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50" href="{% url 'app_home:log' %}?size=500">500</a>
        <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50" href="{% url 'app_home:log' %}?size=1000">1000</a>
        <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50" href="{% url 'app_home:log' %}?size=5000">5000</a>
      </div>
    </details>

    <!-- Purge -->
    {% if 'p_log_admin' in aaa.perms %}
    <form method="post" class="ml-auto">
      {% csrf_token %}
      <button type="submit" name="purge"
              class="px-3 py-1.5 text-xs font-semibold border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition">
        <i class="fa-solid fa-trash fa-fw mr-1"></i>{% translate "Purge" %}
      </button>
    </form>
    {% endif %}

  </div>

  <!-- Table -->
  <table class="w-full text-sm">
    <thead class="bg-gray-50 text-xs text-gray-400 uppercase tracking-wider">
      <tr>
        <th class="px-4 py-3 text-left">{% translate "ID" %}</th>
        <th class="px-4 py-3 text-left">{% translate "Date" %}</th>
        <th class="px-4 py-3 text-left">{% translate "User" %}</th>
        <th class="px-4 py-3 text-left">{% translate "User-as" %}</th>
        <th class="px-4 py-3 text-left">{% translate "IP" %}</th>
        <th class="px-4 py-3 text-left">{% translate "Level" %}</th>
        <th class="px-4 py-3 text-left">{% translate "App" %}</th>
        <th class="px-4 py-3 text-left">{% translate "View" %}</th>
        <th class="px-4 py-3 text-left">{% translate "Action" %}</th>
        <th class="px-4 py-3 text-left">{% translate "Status" %}</th>
        <th class="px-4 py-3 text-left">{% translate "Info" %}</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      {% for log in logs %}
      <tr class="hover:bg-gray-50 transition">
        <td class="px-4 py-2.5 text-gray-600 text-xs">{{ log.id }}</td>
        <td class="px-4 py-2.5 text-gray-700 whitespace-nowrap">{{ log.created|date:'Y-m-d H:i:s' }}</td>
        <td class="px-4 py-2.5 font-medium text-gray-900">{{ log.username }}</td>
        <td class="px-4 py-2.5 text-gray-700">{{ log.impersonate }}</td>
        <td class="px-4 py-2.5 text-gray-700">{{ log.user_ip }}</td>
        <td class="px-4 py-2.5">
          {% if log.level == 'DEBUG' %}
          <span class="bg-gray-100 text-gray-500 text-xs font-semibold px-2 py-0.5 rounded-full">DEBUG</span>
          {% elif log.level == 'INFO' %}
          <span class="bg-blue-100 text-blue-600 text-xs font-semibold px-2 py-0.5 rounded-full">INFO</span>
          {% elif log.level == 'WARNING' %}
          <span class="bg-amber-100 text-amber-700 text-xs font-semibold px-2 py-0.5 rounded-full">WARNING</span>
          {% elif log.level == 'ERROR' %}
          <span class="bg-red-100 text-red-600 text-xs font-semibold px-2 py-0.5 rounded-full">ERROR</span>
          {% elif log.level == 'CRITICAL' %}
          <span class="bg-red-600 text-white text-xs font-semibold px-2 py-0.5 rounded-full">CRITICAL</span>
          {% else %}
          <span class="text-gray-500">{{ log.level }}</span>
          {% endif %}
        </td>
        <td class="px-4 py-2.5 text-gray-800">{{ log.app }}</td>
        <td class="px-4 py-2.5 text-gray-800">{{ log.view }}</td>
        <td class="px-4 py-2.5 text-gray-800">{{ log.action }}</td>
        <td class="px-4 py-2.5 text-gray-800">{{ log.status }}</td>
        <td class="px-4 py-2.5 text-gray-700">{{ log.data|truncatechars:70 }}</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="11" class="px-6 py-10 text-center text-sm text-gray-400">{% translate "No log entries." %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Pagination footer -->
  {% if page_last > 1 %}
  <div class="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
    <p class="text-xs text-gray-400">{% translate "Page" %} {{ page }} / {{ page_last }}</p>
    <ul class="flex items-center gap-1 list-none m-0 p-0 text-sm">
      <li>
        <a class="px-2.5 py-1.5 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition"
           href="?page={{ page_prev }}&size={{ size }}">&laquo;</a>
      </li>
      <li>
        <a class="px-2.5 py-1.5 rounded-lg border {% if page_first %}bg-indigo-600 text-white border-indigo-600{% else %}border-gray-200 text-gray-600 hover:bg-gray-100{% endif %} transition"
           href="?page=1&size={{ size }}">1</a>
      </li>
      {% if page_current %}
      <li>
        <a class="px-2.5 py-1.5 rounded-lg border bg-indigo-600 text-white border-indigo-600"
           href="?page={{ page }}&size={{ size }}">{{ page }}</a>
      </li>
      {% else %}
      <li><span class="px-2 text-gray-400">…</span></li>
      {% endif %}
      <li>
        <a class="px-2.5 py-1.5 rounded-lg border {% if page_last_active %}bg-indigo-600 text-white border-indigo-600{% else %}border-gray-200 text-gray-600 hover:bg-gray-100{% endif %} transition"
           href="?page={{ page_last }}&size={{ size }}">{{ page_last }}</a>
      </li>
      <li>
        <a class="px-2.5 py-1.5 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition"
           href="?page={{ page_next }}&size={{ size }}">&raquo;</a>
      </li>
    </ul>
  </div>
  {% endif %}

</div>

{% endblock %}