<div class="small">
  <div class="mb-2">
    <div class="text-muted">Shipment ID</div>
    <div class="fw-semibold">{{ r.shipment_id }}</div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="text-muted">Invoice #</div>
      <div>{{ r.invoice_number or '' }}</div>
    </div>
    <div class="col-md-6">
      <div class="text-muted">Total (£)</div>
      <div class="fw-semibold">{{ r.Total|fmt }}</div>
    </div>
  </div>

  <hr class="my-2">

  <div class="mb-2">
    <div class="text-muted">Shipment Details</div>
    <div class="border rounded p-2 bg-light-subtle">{{ r.ShipmentDetails|semi_br }}</div>
  </div>

  <div class="row g-2">
    <div class="col-md-6">
      <div class="text-muted">Sender Address</div>
      <div class="border rounded p-2 bg-light-subtle">{{ r.SenderAddress|tidy_address }}</div>
    </div>
    <div class="col-md-6">
      <div class="text-muted">Receiver Address</div>
      <div class="border rounded p-2 bg-light-subtle">{{ r.ReceiverAddress|tidy_address }}</div>
    </div>
  </div>
  
  <!-- 2-column layout: left = pieces box, right = charges -->
  <div class="row g-3 mt-2 align-items-start">
    <!-- Left: Pieces / Weight / Dimensions / Zone -->
    <div class="col-lg-5">
      <div class="text-muted">Pieces / Weight / Dimensions / Zone</div>
      <div class="border rounded p-2 bg-light-subtle">{{ r.PiecesWeightDimensionsZone|semi_br }}</div>
      
      <!--
      {% if r.source_pdf %}
      <div class="mt-2 text-lg-end">
        {# Build PDF URL if we have a filename #}
        {% set pdf_url = r.source_pdf and url_for('pdf_download', fname=r.source_pdf) %}
        {# Pick the first non-empty reference from the parsed shipment #}
        {% set ref1 = r.Reference or r.Reference2 or r.Reference3 %}

        {% if pdf_url %}
          <a href="{{ pdf_url }}"
             class="btn btn-sm btn-outline-secondary open-pdf"
             data-url="{{ pdf_url }}"
             data-ref="{{ ref1 or '' }}">
            Open source PDF
          </a>
        {% else %}
          <span class="text-muted small">No source PDF</span>
        {% endif %}

      </div>
      {% endif %}
      -->
      
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="mb-0">
          Order #{{ r.Reference }}
        </h5>

        <div class="btn-group btn-group-sm">
          {% if r.Reference %}
            <button type="button"
                    class="btn btn-outline-secondary open-order"
                    data-ref="{{ r.Reference }}"
                    data-shipment-id="{{ r.shipment_id }}">
              View order…
            </button>
          {% endif %}

          {% if r.source_pdf %}
            <button type="button"
                    class="btn btn-outline-secondary open-pdf"
                    data-url="{{ pdf_url }}"
                    data-ref="{{ ref1 or '' }}">
              Open source PDF
            </button>
          {% endif %}
        </div>
      </div>
      
      
    </div>      

    <!-- Right: Charges -->
    <div class="col-lg-7">
      <div class="d-flex align-items-center justify-content-between">
        <div class="text-muted mb-1">Charges (£)</div>
        <!-- optional space for anything small on the right -->
      </div>

      {% set charges = r.Charges|parse_charges %}
      {% if charges %}
        <table class="table table-sm table-borderless mb-0 modal-charges">
          <tbody>
            {% for c in charges %}
            <tr>
              <td class="py-1">{{ c.label }}</td>
              <td class="py-1 text-end text-nowrap" style="width:1%; white-space:nowrap;">
                {% if c.amount is not none %}{{ c.amount|fmt }}{% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="fw-semibold border-top">
              <td class="py-1">Total</td>
              <td class="py-1 text-end text-nowrap" style="width:1%;">{{ charges|charges_total|fmt }}</td>
            </tr>
          </tfoot>
        </table>
      {% else %}
        <div class="border rounded p-2 bg-light-subtle">{{ r.Charges|nl2br }}</div>
      {% endif %}
    </div>
  </div>


</div>