{% extends "layouts/base.njk" %}

{% block title %}Erreurs - {{ site_name | default('WhatsApp Channels') }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Erreurs système</h1>
    <p class="text-gray-600 dark:text-gray-400 mt-1">Consultez les erreurs survenues sur le site</p>
  </div>

  <!-- Logs table -->
  <div id="errors-table" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-gray-50 dark:bg-gray-700/50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Niveau</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Message</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Utilisateur</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">IP</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">URL</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Détails</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
          {% for error in errors %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 {% if error.level === 'fatal' %}bg-red-50/50 dark:bg-red-900/20{% endif %}">
            <td class="px-6 py-3">
              <span class="badge 
                {% if error.level === 'fatal' %}badge-danger
                {% elif error.level === 'error' %}badge-danger
                {% else %}badge-warning
                {% endif %}">
                {{ error.level.toUpperCase() }}
              </span>
            </td>
            <td class="px-6 py-3 text-gray-900 dark:text-white max-w-md truncate">{{ error.message }}</td>
            <td class="px-6 py-3 text-gray-500 dark:text-gray-400">
              {% if error.userId %}
              {{ error.userId }}
              {% else %}
              <span class="text-gray-400">—</span>
              {% endif %}
            </td>
            <td class="px-6 py-3 text-gray-500 dark:text-gray-400 font-mono text-sm">{{ error.ip | default('—') }}</td>
            <td class="px-6 py-3 text-gray-500 dark:text-gray-400 text-sm truncate max-w-xs">{{ error.url | default('—') }}</td>
            <td class="px-6 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ error.relativeTime }}</td>
            <td class="px-6 py-3 text-right">
              <a href="/admin/errors/{{ error.id }}" class="btn btn-ghost btn-sm" aria-label="Voir détails">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if pagination.totalPages > 1 %}
    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
      <nav class="flex items-center justify-center space-x-2" aria-label="Pagination">
        {% if pagination.hasPrev %}
        <a href="?page={{ pagination.page - 1 }}" 
           hx-get="?page={{ pagination.page - 1 }}" 
           hx-target="#errors-table"
           hx-push-url="true"
           class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">Précédent</a>
        {% endif %}
        
        <span class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">Page {{ pagination.page }} sur {{ pagination.totalPages }}</span>
        
        {% if pagination.hasNext %}
        <a href="?page={{ pagination.page + 1 }}" 
           hx-get="?page={{ pagination.page + 1 }}" 
           hx-target="#errors-table"
           hx-push-url="true"
           class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">Suivant</a>
        {% endif %}
      </nav>
    </div>
    {% endif %}
  </div>
  {% else %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
    <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">Aucune erreur trouvée</h3>
    <p class="mt-2 text-gray-500 dark:text-gray-400">Félicitations ! Tout fonctionne bien.</p>
  </div>
  {% endif %}
</div>
{% endblock %}