{% extends "base.html" %}
{% block title %}Shipment #{{ shipment.id }} — Sendparcel Demo{% endblock %}
{% block content %}
<div class="page-header d-print-none mb-3">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">Shipment</div>
      <h2 class="page-title">#{{ shipment.id }}</h2>
    </div>
    <div class="col-auto ms-auto">
      <a href="/" class="btn btn-outline-secondary">
        Back to shipments
      </a>
    </div>
  </div>
</div>

<div class="row row-deck row-cards">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Shipment details</h3>
      </div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-5">Reference:</dt>
          <dd class="col-7">{{ shipment.reference_id or "—" }}</dd>
          <dt class="col-5">Status:</dt>
          <dd class="col-7">
            <span id="shipment-status"
                  class="badge bg-{{ status_color(shipment.status) }}">
              {{ status_label(shipment.status) }}
            </span>
          </dd>
          <dt class="col-5">Provider:</dt>
          <dd class="col-7">{{ shipment.provider }}</dd>
          <dt class="col-5">External ID:</dt>
          <dd class="col-7">{{ shipment.external_id or "—" }}</dd>
          <dt class="col-5">Tracking number:</dt>
          <dd class="col-7">{{ shipment.tracking_number or "—" }}</dd>
        </dl>

        <div class="mt-3">
          <button class="btn btn-sm btn-outline-info"
                  hx-get="/shipments/{{ shipment.id }}/refresh-status"
                  hx-target="#shipment-status"
                  hx-swap="outerHTML">
            Refresh status
          </button>
          {% if shipment.status in ("new", "created", "label_ready") %}
          <form method="post" action="/shipments/{{ shipment.id }}/create-label"
                class="d-inline">
            <button type="submit" class="btn btn-sm btn-outline-success">
              Generate label
            </button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Delivery simulator</h3>
      </div>
      <div class="card-body" id="sim-panel"
           hx-get="/sim/panel/{{ shipment.id }}"
           hx-trigger="load"
           hx-swap="innerHTML">
        <div class="text-secondary">Loading simulator panel...</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}