{% extends "base.html" %}
{% set active_page = "logs" %}

{% block title %}Logs — ZP Remote{% endblock %}
{% block page_title %}Logs{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- Filters -->
    <div class="bg-dark-card border border-dark-border rounded-xl p-4 mb-6">
        <form method="GET" action="/logs" class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Project</label>
                <select name="task_name"
                        class="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-gray-300 focus:border-blue-500 focus:outline-none">
                    <option value="">All Projects</option>
                    {% for tn in task_names %}
                    <option value="{{ tn }}" {% if tn == filter_task %}selected{% endif %}>{{ tn }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Level</label>
                <select name="level"
                        class="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-gray-300 focus:border-blue-500 focus:outline-none">
                    <option value="">All Levels</option>
                    <option value="INFO" {% if filter_level == 'INFO' %}selected{% endif %}>🟢 INFO</option>
                    <option value="WARN" {% if filter_level == 'WARN' %}selected{% endif %}>🟡 WARN</option>
                    <option value="ERROR" {% if filter_level == 'ERROR' %}selected{% endif %}>🔴 ERROR</option>
                </select>
            </div>
            <button type="submit"
                    class="px-5 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors">
                <i class="fas fa-filter mr-1"></i>Filter
            </button>
            <a href="/logs"
               class="px-5 py-2 bg-dark-bg text-gray-400 rounded-lg text-sm border border-dark-border hover:text-white transition-colors">
                <i class="fas fa-times mr-1"></i>Reset
            </a>
            <span class="text-sm text-gray-500 ml-auto">Total: {{ total }} records</span>
        </form>
    </div>

    <!-- Logs Table -->
    <div class="bg-dark-card border border-dark-border rounded-xl overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-dark-bg text-gray-500 text-xs uppercase tracking-wider">
                    <th class="px-4 py-3 text-left">Time</th>
                    <th class="px-4 py-3 text-left">Level</th>
                    <th class="px-4 py-3 text-left">Project</th>
                    <th class="px-4 py-3 text-left">Thread</th>
                    <th class="px-4 py-3 text-left">Message</th>
                </tr>
            </thead>
            <tbody>
                {% for log in logs %}
                <tr class="border-t border-dark-border hover:bg-dark-hover transition-colors">
                    <td class="px-4 py-2.5 text-gray-500 text-xs whitespace-nowrap">{{ log.created_at }}</td>
                    <td class="px-4 py-2.5">
                        <span class="log-{{ log.level }} text-xs font-mono font-medium px-2 py-0.5 rounded
                            {% if log.level == 'ERROR' %}bg-red-500/10
                            {% elif log.level == 'WARN' %}bg-yellow-500/10
                            {% else %}bg-green-500/10{% endif %}">
                            {{ log.level }}
                        </span>
                    </td>
                    <td class="px-4 py-2.5 text-gray-300 text-xs">{{ log.task_name }}</td>
                    <td class="px-4 py-2.5 text-gray-500 text-xs">{{ log.thread_id or '—' }}</td>
                    <td class="px-4 py-2.5 text-gray-300 text-xs">{{ log.message }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="px-4 py-12 text-center text-gray-500">
                        <i class="fas fa-inbox text-3xl mb-2 block"></i>
                        Нет логов
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if total > per_page %}
    <div class="flex items-center justify-center gap-2 mt-6">
        {% set total_pages = ((total - 1) // per_page) + 1 %}
        {% if page > 1 %}
        <a href="/logs?page={{ page - 1 }}&task_name={{ filter_task }}&level={{ filter_level }}"
           class="px-3 py-1.5 rounded bg-dark-card border border-dark-border text-gray-400 hover:text-white text-sm">
            <i class="fas fa-chevron-left"></i>
        </a>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p <= 3 or p > total_pages - 3 or (p >= page - 1 and p <= page + 1) %}
            <a href="/logs?page={{ p }}&task_name={{ filter_task }}&level={{ filter_level }}"
               class="px-3 py-1.5 rounded text-sm
                   {% if p == page %}bg-blue-600 text-white{% else %}bg-dark-card border border-dark-border text-gray-400 hover:text-white{% endif %}">
                {{ p }}
            </a>
            {% elif p == 4 or p == total_pages - 3 %}
            <span class="text-gray-600">...</span>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
        <a href="/logs?page={{ page + 1 }}&task_name={{ filter_task }}&level={{ filter_level }}"
           class="px-3 py-1.5 rounded bg-dark-card border border-dark-border text-gray-400 hover:text-white text-sm">
            <i class="fas fa-chevron-right"></i>
        </a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/logs.js"></script>
{% endblock %}