{% extends 'admin_frontend/base.html' %}
{% load i18n humanize %}
{% block title %}{% trans "Carbon Events" %}{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto">
  <h1 class="text-2xl font-semibold mb-4">{% trans "Carbon Events" %}</h1>
  <div class="bg-white rounded shadow p-4 mb-4">
    <form method="get" class="grid md:grid-cols-4 gap-3">
      {{ filter.form.organization }}
      {{ filter.form.status }}
      {{ filter.form.event_date }}
      <div>
        <button class="px-3 py-2 rounded bg-blue-600 text-white">{% trans "Filter" %}</button>
      </div>
    </form>
  </div>
  <form method="post" class="bg-white rounded shadow">
    {% csrf_token %}
    <div class="p-3 flex items-center gap-2 border-b">
      <select name="action" class="border rounded px-2 py-1">
        <option value="">-- {% trans "Bulk action" %} --</option>
        <option value="approve">{% trans "Approve" %}</option>
        <option value="reject">{% trans "Reject" %}</option>
      </select>
      <button class="px-3 py-1 rounded bg-gray-800 text-white">{% trans "Apply" %}</button>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead>
          <tr class="text-left text-gray-600">
            <th class="px-3 py-2"><input type="checkbox" onclick="document.querySelectorAll('input[name=\'ids\']').forEach(cb=>cb.checked=this.checked)"></th>
            <th class="px-3 py-2">{% trans "Date" %}</th>
            <th class="px-3 py-2">{% trans "Organization" %}</th>
            <th class="px-3 py-2">{% trans "Ticket" %}</th>
            <th class="px-3 py-2">{% trans "Material" %}</th>
            <th class="px-3 py-2 text-right">{% trans "Qty" %}</th>
            <th class="px-3 py-2">{% trans "Unit" %}</th>
            <th class="px-3 py-2 text-right">{% trans "kgCO2e" %}</th>
            <th class="px-3 py-2">{% trans "Status" %}</th>
          </tr>
        </thead>
        <tbody>
          {% for ev in events %}
          <tr class="border-t">
            <td class="px-3 py-2"><input type="checkbox" name="ids" value="{{ ev.id }}"></td>
            <td class="px-3 py-2 whitespace-nowrap">{{ ev.event_date|date:"Y-m-d H:i" }}</td>
            <td class="px-3 py-2">{{ ev.organization.name }}</td>
            <td class="px-3 py-2">{% if ev.weigh_ticket %}{{ ev.weigh_ticket.ticket_number|default:ev.weigh_ticket.id }}{% else %}-{% endif %}</td>
            <td class="px-3 py-2">{{ ev.material|default:"-" }}</td>
            <td class="px-3 py-2 text-right">{{ ev.quantity|floatformat:2|intcomma }}</td>
            <td class="px-3 py-2">{{ ev.unit }}</td>
            <td class="px-3 py-2 text-right">{{ ev.kgco2e|floatformat:2|intcomma }}</td>
            <td class="px-3 py-2">{{ ev.get_status_display }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="9" class="px-3 py-6 text-center text-gray-600">{% trans "No events found." %}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% include 'admin_frontend/_pagination.html' %}
  </form>
</div>
{% endblock %}
