{% extends "base.html" %}

{% block content %}

<div class="mb-4 flex items-center justify-between">
  <a
    href="{% url 'log_list' %}"
    class="text-sm text-blue-600 hover:underline"
  >
    ← Back to Logs
  </a>

  <span class="text-sm text-gray-500">
    {{ lines|length }} lines
  </span>
</div>

<h2 class="mb-3 text-xl font-semibold text-gray-800">
  {{ filename }}
</h2>

<div
  class="max-h-[80vh] overflow-auto rounded-lg bg-neutral-900 p-4 font-mono text-sm shadow mx-4"
>

  {% for line in lines %}
    <div
      class="
        flex gap-2 py-0.2
        {% if line.is_trace %} pl-10 {% endif %}
      "
    >

      <!-- Timestamp -->
      <span class="w-44 shrink-0 text-neutral-500">
        {{ line.time }}
      </span>

      <!-- Level -->
      <span class="
        w-20 shrink-0 font-semibold
        {% if line.level == 'ERROR' %} text-red-400
        {% elif line.level == 'WARNING' %} text-yellow-400
        {% elif line.level == 'INFO' %} text-blue-400
        {% elif line.level == 'DEBUG' %} text-gray-400
        {% elif line.level == 'CRITICAL' %} text-purple-400
        {% else %} text-neutral-600 {% endif %}
      ">
        {{ line.level }}
      </span>

      <!-- Logger -->
      <span class="w-64 shrink-0 text-green-400 truncate">
        {{ line.logger }}
      </span>

      <!-- Message -->
      <span class="flex-1 whitespace-pre-wrap break-all text-neutral-200">
        {{ line.message }}
      </span>

    </div>
  {% endfor %}

</div>

{% endblock %}
