{% extends "base.html" %}
{% block title %}Order #{{ order.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">Order</div>
      <h2 class="page-title">{{ order.reference }}</h2>
    </div>
    <div class="col-auto ms-auto">
      <a href="/" class="btn btn-outline-secondary">Back to list</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">Order details</h3>
      </div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-5">Sender:</dt>
          <dd class="col-7">{{ order.sender_name }} ({{ order.sender_email }})</dd>
          <dt class="col-5">Recipient:</dt>
          <dd class="col-7">{{ order.recipient_name or order.recipient_email }}</dd>
          <dt class="col-5">Phone:</dt>
          <dd class="col-7">{{ order.recipient_phone }}</dd>
          <dt class="col-5">Address:</dt>
          <dd class="col-7">
            {{ order.recipient_line1 }}
            {% if order.recipient_city %}, {{ order.recipient_city }}{% endif %}
            {{ order.recipient_postal_code }}
          </dd>
          {% if order.recipient_locker_code %}
          <dt class="col-5">Parcel locker:</dt>
          <dd class="col-7">{{ order.recipient_locker_code }}</dd>
          {% endif %}
          <dt class="col-5">Size:</dt>
          <dd class="col-7">{{ order.package_size }}</dd>
          <dt class="col-5">Weight:</dt>
          <dd class="col-7">{{ order.weight_kg }} kg</dd>
        </dl>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Shipments</h3>
      </div>
      <div class="card-body">
        {% if order.shipments %}
        <div class="list-group list-group-flush">
          {% for shipment in order.shipments %}
          <a href="/shipments/{{ shipment.id }}"
             class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">Shipment #{{ shipment.id }}</h5>
              <span class="badge bg-{{ status_color(shipment.status) }}">
                {{ status_label(shipment.status) }}
              </span>
            </div>
            <small class="text-muted">
              Provider: {{ shipment.provider }}
              {% if shipment.tracking_number %}
              | Tracking: {{ shipment.tracking_number }}
              {% endif %}
            </small>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-secondary mb-0">No shipments.</p>
        {% endif %}

        <div class="mt-3">
          <form method="post" action="/orders/{{ order.id }}/ship">
            <input type="hidden" name="provider" value="{{ default_provider }}" />
            <button type="submit" class="btn btn-primary btn-sm">
              Create shipment
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% if order.notes %}
<div class="card mt-3">
  <div class="card-header"><h3 class="card-title">Notes</h3></div>
  <div class="card-body">{{ order.notes }}</div>
</div>
{% endif %}
{% endblock %}