<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">
        <a href="{{ url_for('pdf_download', fname=r.source_pdf) }}"
           class="btn btn-outline-secondary btn-sm">
          Open source PDF
        </a>
      </div>
      {% endif %}
    </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>