{% extends "base.html" %}
{% load static %}

{% block title %}
  {{ page_title }} - PelipostPRO
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2">Mail Portal</h1>
    <a href="/admin/core/parcel/add/" class="btn btn-primary">Add Parcel</a>
  </div>

  <div class="card shadow-sm">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th scope="col" class="text-nowrap py-3 px-4">Sender</th>
              <th scope="col" class="text-nowrap py-3 px-4">Recipient</th>
              <th scope="col" class="text-nowrap py-3 px-4">Tracking #</th>
              <th scope="col" class="text-nowrap py-3 px-4">Status</th>
              <th scope="col" class="text-nowrap py-3 px-4">Assignee</th>
              <th scope="col" class="text-nowrap py-3 px-4">Received</th>
            </tr>
          </thead>
          <tbody>
            {% for parcel in parcels %}
            <tr>
              <td class="px-4">
                <div class="fw-bold">{{ parcel.sender_name }}</div>
                <div class="text-muted small">{{ parcel.sender_email }}</div>
              </td>
              <td class="px-4">
                <div class="fw-bold">{{ parcel.recipient_name }}</div>
                <div class="text-muted small">{{ parcel.recipient_email }}</div>
              </td>
              <td class="font-monospace px-4">{{ parcel.tracking_number }}</td>
              <td class="px-4">
                {% if parcel.status == 'processed' %}
                  <span class="badge status-pill status-processed">Processed</span>
                {% elif parcel.status == 'rejected' %}
                  <span class="badge status-pill status-rejected">Rejected</span>
                {% else %}
                  <span class="badge status-pill status-pending">Pending</span>
                {% endif %}
              </td>
              <td class="px-4">
                <div class="d-flex align-items-center">
                  <div class="avatar avatar-indigo me-3">{{ parcel.assignee_initials }}</div>
                  <div>
                    <div class="fw-bold">{{ parcel.assignee_first_name }} {{ parcel.assignee_last_name }}</div>
                  </div>
                </div>
              </td>
              <td class="text-muted px-4">{{ parcel.received_date|date:"M d, Y, P" }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="6" class="text-center py-5">
                <h5 class="mb-2">No parcels found.</h5>
                <p class="text-muted">Click "Add Parcel" to get started.</p>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}
