{% extends "base.html" %}
{% block body %}
<div class="mb-8">
  <h1 class="text-3xl font-bold tracking-tight text-white flex items-center gap-3 mb-2">
    <i data-lucide="scroll-text" class="text-app-primary w-8 h-8"></i>
    Логи
  </h1>
  <div class="text-app-textMuted text-sm">Журнал действий и запросов админки. События старше 30 дней удаляются автоматически.</div>
</div>

<div class="card overflow-hidden mb-8">
  <div class="p-4 bg-app-surface border-b border-app-border">
    <form method="get" action="/logs" class="flex flex-wrap items-end gap-4">
      <div class="flex-1 min-w-[200px]">
        <label class="block text-[10px] uppercase font-bold text-app-textMuted mb-1">Поиск</label>
        <div class="relative">
          <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-app-textMuted"></i>
          <input name="q" value="{{ q }}" placeholder="action, entity, JSON" class="input w-full pl-9">
        </div>
      </div>
      
      <div class="w-full sm:w-auto">
        <label class="block text-[10px] uppercase font-bold text-app-textMuted mb-1">Действие</label>
        <select name="action" class="select w-full sm:w-40">
          <option value="">Все</option>
          {% for item in actions %}
          <option value="{{ item.action }}" {% if action == item.action %}selected{% endif %}>{{ item.action }} ({{ item.count }})</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="w-full sm:w-auto">
        <label class="block text-[10px] uppercase font-bold text-app-textMuted mb-1">Пользователь</label>
        <select name="actor_id" class="select w-full sm:w-40">
          <option value="0">Все</option>
          {% for item in actors %}
          <option value="{{ item.id }}" {% if actor_id == item.id %}selected{% endif %}>{{ item.login }} ({{ item.count }})</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="w-full sm:w-auto">
        <label class="block text-[10px] uppercase font-bold text-app-textMuted mb-1">Сущность</label>
        <select name="entity_type" class="select w-full sm:w-40">
          <option value="">Все</option>
          {% for item in entity_types %}
          <option value="{{ item.entity_type }}" {% if entity_type == item.entity_type %}selected{% endif %}>{{ item.entity_type }} ({{ item.count }})</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="w-full sm:w-auto">
        <label class="block text-[10px] uppercase font-bold text-app-textMuted mb-1">Период</label>
        <div class="flex gap-2">
          <input type="date" name="date_from" value="{{ date_from }}" class="input w-[130px]">
          <input type="date" name="date_to" value="{{ date_to }}" class="input w-[130px]">
        </div>
      </div>
      
      <div class="flex gap-2 w-full lg:w-auto">
        <button class="btn btn-primary flex-1 lg:flex-none" type="submit">Найти</button>
        <a class="btn btn-surface flex-1 lg:flex-none border-app-border" href="/logs">Сбросить</a>
      </div>
    </form>
  </div>
  
  <div class="p-4 border-b border-app-border flex justify-between items-center bg-app-bg/50">
    <div class="text-sm text-app-textMuted flex items-center gap-2">
      <i data-lucide="layers" class="w-4 h-4"></i>
      Всего записей: <span class="font-bold text-white">{{ pagination.total }}</span>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-sm text-app-textMuted">На странице:</span>
      <form method="get" action="/logs" class="m-0 flex items-center gap-2">
        {% for item in preserved_query %}
          {% if item.key != "per_page" %}
          <input type="hidden" name="{{ item.key }}" value="{{ item.value }}">
          {% endif %}
        {% endfor %}
        <select name="per_page" class="select select-sm w-20 py-1 pr-8" onchange="this.form.submit()">
          {% for n in [25,50,100,200] %}
          <option value="{{ n }}" {% if pagination.per_page == n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </form>
    </div>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full text-left text-sm whitespace-nowrap">
      <thead class="bg-app-bg border-b border-app-border">
        <tr class="text-app-textMuted font-semibold tracking-wide uppercase text-xs">
          <th class="px-4 py-3 w-40">Время</th>
          <th class="px-4 py-3 w-32">Пользователь</th>
          <th class="px-4 py-3 w-48">Действие</th>
          <th class="px-4 py-3 w-48">Сущность</th>
          <th class="px-4 py-3 min-w-[300px] w-full">Детали</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-app-border text-xs">
        {% for item in logs %}
        <tr class="hover:bg-app-surfaceHover transition-colors group">
          <td class="px-4 py-3 font-mono text-app-textMuted text-[10px]">{{ item.created_at_fmt }}</td>
          <td class="px-4 py-3 font-bold text-white">{{ item.actor_label }}</td>
          <td class="px-4 py-3"><span class="badge badge-neutral px-1.5 py-0.5 text-[10px] font-mono border-app-border">{{ item.action }}</span></td>
          <td class="px-4 py-3 font-mono text-app-textMuted text-[10px]">
            {{ item.entity_type }}
            {% if item.entity_id %}
            <span class="text-white ml-1">#{{ item.entity_id }}</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 whitespace-normal">
            {% if item.details_pretty %}
            <details class="group/json">
              <summary class="cursor-pointer select-none flex items-center gap-1.5 text-app-primary hover:text-white transition-colors">
                <i data-lucide="chevron-right" class="w-4 h-4 transition-transform group-open/json:rotate-90"></i>
                <span class="text-[10px] font-bold uppercase tracking-wider">JSON Payload</span>
              </summary>
              <div class="mt-2 pl-5">
                <div class="bg-[#0f1115] border border-app-border rounded-lg p-3 max-h-64 overflow-auto">
                  <pre class="font-mono text-[10px] text-app-textMuted leading-relaxed">{{ item.details_pretty }}</pre>
                </div>
              </div>
            </details>
            {% else %}
            <span class="text-app-textMuted/50">—</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="5" class="px-4 py-12 text-center">
            <div class="flex flex-col items-center justify-center text-app-textMuted">
              <i data-lucide="search-x" class="w-12 h-12 mb-3 text-app-borderFocus"></i>
              <p class="text-sm">Записей по заданным фильтрам не найдено</p>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  {% if pagination.pages > 1 %}
  <div class="p-4 border-t border-app-border flex justify-center bg-app-bg/50">
    <div class="tabs p-1">
      <a class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md {% if pagination.page == 1 %}pointer-events-none opacity-50{% endif %}" href="?page=1{% for k,v in preserved_query %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}"><i data-lucide="chevrons-left" class="w-4 h-4"></i></a>
      <a class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md {% if pagination.page == 1 %}pointer-events-none opacity-50{% endif %}" href="?page={{ pagination.page - 1 }}{% for k,v in preserved_query %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}"><i data-lucide="chevron-left" class="w-4 h-4"></i></a>
      
      <span class="flex items-center justify-center px-4 text-sm font-medium text-app-textMuted bg-app-bg rounded-md border border-app-border mx-1">
        {{ pagination.page }} из {{ pagination.pages }}
      </span>
      
      <a class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md {% if pagination.page >= pagination.pages %}pointer-events-none opacity-50{% endif %}" href="?page={{ pagination.page + 1 }}{% for k,v in preserved_query %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}"><i data-lucide="chevron-right" class="w-4 h-4"></i></a>
      <a class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md {% if pagination.page >= pagination.pages %}pointer-events-none opacity-50{% endif %}" href="?page={{ pagination.pages }}{% for k,v in preserved_query %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}"><i data-lucide="chevrons-right" class="w-4 h-4"></i></a>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}