{% extends "base.html" %}

{% block title %}Shipment #{{ shipment.pk }} — SendParcel Demo{% endblock %}

{% block page_title %}Shipment #{{ shipment.pk }}{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Shipment details</h3>
      </div>
      <div class="card-body">
        <div class="datagrid">
          <div class="datagrid-item">
            <div class="datagrid-title">Order</div>
            <div class="datagrid-content">
              <a href="{% url 'shipping:order_detail' pk=shipment.order.pk %}">
                #{{ shipment.order.pk }} — {{ shipment.order.description }}
              </a>
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Provider</div>
            <div class="datagrid-content">{{ shipment.provider }}</div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">External ID</div>
            <div class="datagrid-content">
              {{ shipment.external_id|default:"—" }}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Tracking number</div>
            <div class="datagrid-content">
              <strong>{{ shipment.tracking_number|default:"—" }}</strong>
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Created</div>
            <div class="datagrid-content">
              {{ shipment.created_at|date:"d.m.Y H:i" }}
            </div>
          </div>
        </div>
      </div>
      {% if shipment.label_url %}
        <div class="card-footer">
          <a
            href="{{ shipment.label_url }}"
            class="btn btn-primary"
            target="_blank"
          >
            Download label (PDF)
          </a>
        </div>
      {% endif %}
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Status</h3>
      </div>
      <div
        id="tracking-panel"
        hx-get="{% url 'shipping:shipment_tracking' pk=shipment.pk %}"
        hx-trigger="every 3s"
        hx-swap="innerHTML"
      >
        {% include "shipping/shipment_tracking.html" %}
      </div>
    </div>
  </div>
</div>
{% endblock %}