{% set o = o or {} %}

{% if not o %}
  <div class="alert alert-warning mb-0">No order found for reference <strong>{{ ref }}</strong>.</div>
{% else %}
<div class="row g-2">
  <div class="col-12 col-md-6">
    <div class="mb-2">
      <div class="fw-semibold">Order {{ o.OrderNo }}</div>
      {% if o.Name %}<div class="text-muted small">{{ o.Name }}</div>{% endif %}
      {% if o.EmailAddress %}<div class="text-muted small">{{ o.EmailAddress }}</div>{% endif %}
    </div>
  </div>
  <div class="col-12 col-md-6">
    <button type="button"
            class="btn btn-sm btn-outline-secondary open-linked-shipment d-none">
      View shipment…
    </button>  
    <button type="button" class="btn btn-sm btn-outline-secondary open-order-items" data-order="{{ o.OrderNo }}">
    View order items…
    </button>
    <button type="button"
            class="btn btn-outline-secondary btn-sm open-restore-basket"
            data-order="{{ o.OrderNo }}"
            data-session="{{ o.SessionID }}"
            data-ip="{{ o.IPAddress }}">
      Restore items to basket
    </button>
    
  </div>
</div>

  <div class="row g-2">
    <!-- Invoice/Billing address -->
    <div class="col-12 col-md-6">
      <div class="small text-muted">Invoice Address</div>
      <div class="border rounded p-2 bg-light-subtle lh-sm">
        {% if o.CompanyName %}{{ o.CompanyName }}<br>{% endif %}
        {{ o.AddressLine1 }}{% if o.AddressLine2 %}<br>{{ o.AddressLine2 }}{% endif %}
        {% if o.Town %}<br>{{ o.Town }}{% endif %}
        {% if o.County %}<br>{{ o.County }}{% endif %}
        {% if o.Postcode %}<br>{{ o.Postcode }}{% endif %}
        {% if o.Country %}<br>{{ o.Country }}{% endif %}
      </div>
    </div>

    <!-- Delivery address -->
    <div class="col-12 col-md-6">
      {# Decide whether to show invoice address in the delivery slot #}
      {% set same_as_invoice = (o.DeliveryAddressSameAsInvoice == 1 or o.DeliveryAddressSameAsInvoice is true) %}
      {% set delivery_is_blank = not (o.DeliveryAddressLine1 or o.DeliveryTown or o.DeliveryPostcode or o.DeliveryCountry) %}
      {% set use_invoice_as_delivery = same_as_invoice or delivery_is_blank %}

      <div class="small text-muted">
        Delivery Address{% if same_as_invoice %} <span class="text-muted">(same as invoice)</span>{% endif %}
      </div>
      <div class="border rounded p-2 bg-light-subtle lh-sm">
        {% if use_invoice_as_delivery %}
          {% if o.DeliveryName %}{{ o.DeliveryName }}<br>{% endif %}
          {% if o.DeliveryCompanyName %}{{ o.DeliveryCompanyName }}<br>{% endif %}
          {{ o.AddressLine1 }}{% if o.AddressLine2 %}<br>{{ o.AddressLine2 }}{% endif %}
          {% if o.Town %}<br>{{ o.Town }}{% endif %}
          {% if o.County %}<br>{{ o.County }}{% endif %}
          {% if o.Postcode %}<br>{{ o.Postcode }}{% endif %}
          {% if o.Country %}<br>{{ o.Country }}{% endif %}
        {% else %}
          {% if o.DeliveryName %}{{ o.DeliveryName }}<br>{% endif %}
          {% if o.DeliveryCompanyName %}{{ o.DeliveryCompanyName }}<br>{% endif %}
          {% if o.DeliveryAddressLine1 %}{{ o.DeliveryAddressLine1 }}<br>{% endif %}
          {% if o.DeliveryAddressLine2 %}{{ o.DeliveryAddressLine2 }}<br>{% endif %}
          {% if o.DeliveryTown %}{{ o.DeliveryTown }}<br>{% endif %}
          {% if o.DeliveryCounty %}{{ o.DeliveryCounty }}<br>{% endif %}
          {% if o.DeliveryPostcode %}{{ o.DeliveryPostcode }}<br>{% endif %}
          {% if o.DeliveryCountry %}{{ o.DeliveryCountry }}{% endif %}
        {% endif %}
      </div>
      {% if o.DeliveryInfo %}<div class="small text-muted mt-1">Info: {{ o.DeliveryInfo }}</div>{% endif %}

    </div>

    <!-- Dates & status -->
    <div class="col-12 col-md-6">
      <table class="table table-sm mb-2">
        <tbody>
          <tr><th class="w-50">Ordered</th><td class="text-end">{{ o.DateTimeOrdered }}</td></tr>
          <tr><th>Paid</th><td class="text-end">{{ o.DateTimePaid }}</td></tr>
          <tr><th>Completed</th><td class="text-end">{{ o.DateTimeCompleted }}</td></tr>
          <tr><th>Status</th><td class="text-end">{{ o.Status }}</td></tr>
          {% if o.DeliveryAddressSameAsInvoice is not none %}
            <tr><th>Delivery = Invoice</th><td class="text-end">{{ 'Yes' if o.DeliveryAddressSameAsInvoice else 'No' }}</td></tr>
          {% endif %}
          {% if o.DeliveryWillCollect is not none %}
            <tr><th>Will Collect</th><td class="text-end">{{ 'Yes' if o.DeliveryWillCollect else 'No' }}</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    <!-- Money -->
    <div class="col-12 col-md-6">
      <table class="table table-sm mb-2">
        <tbody>
          <tr><th class="w-50">Subtotal (£)</th><td class="text-end">{{ o.Subtotal|blank_if_zero }}</td></tr>
          <tr><th>Discount (£)</th><td class="text-end">{{ o.Discount|blank_if_zero }}</td></tr>
          <tr><th>Delivery (£)</th><td class="text-end">{{ o.Delivery|blank_if_zero }}</td></tr>
          <tr><th>VAT Included (£)</th><td class="text-end">{{ o.VATIncluded|blank_if_zero }}</td></tr>
          <tr><th>VAT Deducted (£)</th><td class="text-end">{{ o.VATDeducted|blank_if_zero }}</td></tr>
          <tr class="table-active"><th>Grand Total (£)</th><td class="text-end fw-semibold">{{ o.GrandTotal|blank_if_zero }}</td></tr>
        </tbody>
      </table>
    </div>

    <!-- Shipping meta -->
    <div class="col-12">
      <div class="row g-2">
        <div class="col-12 col-md-6">
          <table class="table table-sm mb-2">
            <tbody>
              <tr><th class="w-50">Courier</th><td class="text-end">{{ o.Courier }}</td></tr>
              <tr><th>Tracking No</th><td class="text-end">{{ o.TrackingNo }}</td></tr>
              <tr><th>Delivery Service</th><td class="text-end">{{ o.DeliveryService }}</td></tr>
              <tr><th>Delivery Option</th><td class="text-end">{{ o.DeliveryOption }}</td></tr>
              <tr><th>Agent</th><td class="text-end">{{ o.DeliveryAgentName }}</td></tr>
              <tr><th>Agent Date</th><td class="text-end">{{ o.DeliveryAgentDate }}</td></tr>
              <tr><th>Agent Cost (£)</th><td class="text-end">{{ o.DeliveryAgentCost|blank_if_zero }}</td></tr>
              <tr><th>Calculated (£)</th><td class="text-end">{{ o.DeliveryCalculatedCost|blank_if_zero }}</td></tr>
            </tbody>
          </table>
        </div>
        <div class="col-12 col-md-6">
          <table class="table table-sm mb-2">
            <tbody>
              <tr><th class="w-50">Payment Method</th><td class="text-end">{{ o.PaymentMethod }}</td></tr>
              <tr><th>Payment Ref</th><td class="text-end">{{ o.PaymentReference }}</td></tr>
              <tr><th>Total Weight</th><td class="text-end">{{ o.TotalWeight }}</td></tr>
              <tr><th>Gross Weight</th><td class="text-end">{{ o.GrossWeight }}</td></tr>
              <tr><th>Est. Gross</th><td class="text-end">{{ o.EstimatedGrossWeight }}</td></tr>
              <tr><th>Est. Volumetric</th><td class="text-end">{{ o.EstimatedVolumetricWeight }}</td></tr>
              <tr><th>Package</th><td class="text-end">{{ o.PackageName or o.PackageSize }}</td></tr>
              {# removed CN22 Tariff row #}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {% if o.Message or o.MessageToCustomer or o.Notes or o.CommercialInvoiceInfo %}
      <div class="col-12">
        <div class="small text-muted">Notes</div>
        <div class="border rounded p-2 bg-light-subtle">
          {% if o.Message %}<div class="mb-1"><strong>Message:</strong> {{ o.Message }}</div>{% endif %}
          {% if o.MessageToCustomer %}<div class="mb-1"><strong>To Customer:</strong> {{ o.MessageToCustomer }}</div>{% endif %}
          {% if o.Notes %}<div class="mb-1"><strong>Internal:</strong> {{ o.Notes }}</div>{% endif %}
          {% if o.CommercialInvoiceInfo %}<div><strong>Comm. Invoice:</strong> {{ o.CommercialInvoiceInfo }}</div>{% endif %}
        </div>
      </div>
    {% endif %}
  </div>
  
<div class="modal fade" id="orderItemsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title">Order items</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Loading…
      </div>
    </div>
  </div>
</div>

  
{% endif %}