{% extends "base.html" %}

{% block title %}Historial de Búsquedas - {{ user.username }}{% endblock %}

{% block content %}
<div style="max-width: 900px; margin: 20px auto;">
    <h2 style="margin-bottom: 20px;">
        <i class="fas fa-history"></i> Historial de Búsquedas
        <small style="color: #666; font-size: 16px; font-weight: normal;">({{ total }} búsquedas)</small>
    </h2>

    {% if searches %}
    <div style="background: #f9f9f9; padding: 20px; border-radius: 10px;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="border-bottom: 2px solid #ddd;">
                    <th style="padding: 12px; text-align: left;">Búsqueda</th>
                    <th style="padding: 12px; text-align: center; width: 120px;">Resultados</th>
                    <th style="padding: 12px; text-align: right; width: 180px;">Fecha y Hora</th>
                </tr>
            </thead>
            <tbody>
                {% for search in searches %}
                <tr style="border-bottom: 1px solid #eee;">
                    <td style="padding: 12px;">
                        <a href="/api/search?q={{ search.query | urlencode }}"
                            style="color: #6c63ff; text-decoration: none; font-weight: 500;"
                            title="Click para buscar nuevamente">
                            {{ search.query }}
                        </a>
                    </td>
                    <td style="padding: 12px; text-align: center;">
                        <span style="background: #e7e7ff; padding: 4px 10px; border-radius: 12px; font-size: 14px;">
                            {{ search.results_count }}
                        </span>
                    </td>
                    <td style="padding: 12px; text-align: right; color: #666; font-size: 14px;">
                        {{ search.searched_at.strftime('%d/%m/%Y %H:%M:%S') }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- Pagination -->
        {% if total_pages > 1 %}
        <div style="margin-top: 30px; text-align: center;">
            <div style="display: inline-flex; gap: 5px; align-items: center;">
                {% if page > 1 %}
                <a href="?page={{ page - 1 }}"
                    style="padding: 8px 12px; background: #6c63ff; color: white; text-decoration: none; border-radius: 5px;">
                    ← Anterior
                </a>
                {% endif %}

                <span style="padding: 8px 16px; color: #666;">
                    Página {{ page }} de {{ total_pages }}
                </span>

                {% if page < total_pages %} <a href="?page={{ page + 1 }}"
                    style="padding: 8px 12px; background: #6c63ff; color: white; text-decoration: none; border-radius: 5px;">
                    Siguiente →
                    </a>
                    {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
    {% else %}
    <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 10px;">
        <i class="fas fa-search" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
        <p style="color: #666; font-size: 18px;">No tienes búsquedas guardadas todavía</p>
    </div>
    {% endif %}

    <div style="margin-top: 20px; text-align: center;">
        <a href="{{ url_for('account.index') }}" style="color: #6c63ff; text-decoration: none; font-weight: 500;">
            ← Volver a Tu Cuenta
        </a>
    </div>
</div>
{% endblock %}