{% extends "base.html" %}
{% set active_nav = "shipments" %}

{% block title %}Shipments - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Shipments</h1>
        <p class="page-subtitle">Track specimen shipments to the lab</p>
    </div>
    {% if user.can_write %}
    <a href="/shipments/new" class="btn btn-primary">+ New Shipment</a>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">
        <div class="flex gap-md items-center">
            <select class="form-select" style="width: auto;" onchange="filterShipments(this.value)">
                <option value="">All Statuses</option>
                <option value="CREATED" {% if status_filter == 'CREATED' %}selected{% endif %}>Created</option>
                <option value="IN_TRANSIT" {% if status_filter == 'IN_TRANSIT' %}selected{% endif %}>In Transit</option>
                <option value="RECEIVED" {% if status_filter == 'RECEIVED' %}selected{% endif %}>Received</option>
            </select>
        </div>
        <span class="text-muted text-sm">{{ shipments|length }} shipments</span>
    </div>
    
    {% if shipments %}
    <div class="table-container">
        <table class="table" data-sortable-table="true">
            <thead>
                <tr>
                    <th>Shipment #</th>
                    <th>EUID</th>
                    <th>Carrier</th>
                    <th>Contents</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for shipment in shipments %}
                <tr>
                    <td data-sort-value="{{ shipment.shipment_number }}">
                        <a href="/shipments/{{ shipment.shipment_number }}" class="text-mono">
                            {{ shipment.shipment_number }}
                        </a>
                    </td>
                    <td data-sort-value="{{ shipment.sort_key or 0 }}"><a class="text-mono text-sm" href="/tapdb/object/{{ shipment.id }}">{{ shipment.id }}</a></td>
                    <td data-sort-value="{{ shipment.carrier or '' }}">{{ shipment.carrier or "—" }}</td>
                    <td data-sort-value="{{ '%09d-%09d'|format(shipment.kit_count or 0, shipment.collection_count or 0) }}">
                        {{ shipment.kit_count or 0 }} kit{{ 's' if shipment.kit_count != 1 }}
                        ({{ shipment.collection_count or 0 }} collection{{ 's' if shipment.collection_count != 1 }})
                    </td>
                    <td data-sort-value="{{ shipment.status }}">
                        <span class="status-pill status-{{ shipment.status|lower|replace('_', '-') }}">
                            {{ shipment.status|replace('_', ' ') }}
                        </span>
                    </td>
                    <td class="text-muted text-sm" data-sort-value="{{ shipment.sort_key or 0 }}">{{ shipment.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/shipments/{{ shipment.shipment_number }}" class="btn btn-sm btn-ghost">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">📦</div>
        <p>No shipments found</p>
        {% if user.can_write %}
        <a href="/shipments/new" class="btn btn-primary mt-md">Create Shipment</a>
        {% endif %}
    </div>
    {% endif %}
</div>

<script>
function filterShipments(status) {
    const url = new URL(window.location);
    if (status) {
        url.searchParams.set('status', status);
    } else {
        url.searchParams.delete('status');
    }
    window.location = url;
}
</script>
{% endblock %}