{% extends "base.html" %}
{% block title %}Deliveries — {{ webhook.url }} — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="mb-4">
  <a href="{% url 'fossil:webhooks' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Webhooks</a>
</div>

<div class="flex items-center justify-between mb-6">
  <div>
    <h2 class="text-lg font-semibold text-gray-200">Delivery Log</h2>
    <p class="text-sm text-gray-400 mt-1 truncate max-w-xl">{{ webhook.url }}</p>
  </div>
</div>

{% if deliveries %}
<div class="overflow-x-auto rounded-lg border border-gray-700">
  <table class="min-w-full divide-y divide-gray-700">
    <thead class="bg-gray-800">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Event</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Response</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Duration</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Attempt</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Delivered</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-800 bg-gray-900">
      {% for d in deliveries %}
      <tr class="hover:bg-gray-800/50">
        <td class="px-4 py-3 whitespace-nowrap">
          {% if d.success %}
          <span class="inline-flex rounded-full bg-green-900/50 px-2 py-0.5 text-xs font-semibold text-green-300">OK</span>
          {% else %}
          <span class="inline-flex rounded-full bg-red-900/50 px-2 py-0.5 text-xs font-semibold text-red-300">Failed</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">{{ d.event_type }}</td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">{{ d.response_status|default:"--" }}</td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">{{ d.duration_ms }}ms</td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">#{{ d.attempt }}</td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ d.delivered_at|timesince }} ago</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
  <p class="text-sm text-gray-500">No deliveries yet.</p>
</div>
{% endif %}
{% endblock %}