{% extends "base.html" %}
{% block title %}Home - Shipping demo{% endblock %}
{% block content %}
<div class="page-header d-print-none mb-3">
  <div class="row align-items-center">
    <div class="col-auto">
      <h2 class="page-title">Shipments</h2>
    </div>
    <div class="col-auto ms-auto">
      <a href="/shipments/new" class="btn btn-primary">New shipment</a>
    </div>
  </div>
</div>

{% if shipments %}
<div class="card">
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Reference</th>
          <th>Provider</th>
          <th>Receiver</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for shipment in shipments %}
        <tr>
          <td>{{ shipment.id }}</td>
          <td>{{ shipment.reference_id or "—" }}</td>
          <td>{{ shipment.provider }}</td>
          <td>{{ shipment.receiver_name or "—" }}</td>
          <td>
            <span class="badge bg-{{ status_color(shipment.status) }}">
              {{ status_label(shipment.status) }}
            </span>
          </td>
          <td>
            <a href="/shipments/{{ shipment.id }}" class="btn btn-sm btn-outline-primary">
              Details
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="empty">
  <p class="empty-title">No shipments yet</p>
  <p class="empty-subtitle text-secondary">
    Create your first shipment to get started.
  </p>
  <div class="empty-action">
    <a href="/shipments/new" class="btn btn-primary">New shipment</a>
  </div>
</div>
{% endif %}
{% endblock %}