{% extends "pos/base.html" %}
{% block title %}Transfer Invoice{% endblock %}
{% block heading %}Transfer Invoice{% endblock %}

{% block content %}
<div class="card">
  <div class="card-body">
    <h4 class="mb-2">Stock Transfer Invoice</h4>
    <div><strong>Transfer #:</strong> {{ tr.transfer_no }}</div>
    <div><strong>Date:</strong> {{ tr.transfer_date }} {{ tr.transfer_time }}</div>
    <div><strong>Type:</strong> {{ tr.transfer_type }}</div>
    <div><strong>Mode:</strong> {{ tr.mode }}</div>
    <div><strong>Status:</strong> {{ tr.status }}</div>
    <div class="mt-2"><strong>Remarks:</strong> {{ tr.remarks|default:"" }}</div>

    <hr>

    <div class="table-responsive">
      <table class="table table-sm table-bordered">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>Product</th>
            <th>From Variant</th>
            <th>To Variant</th>
            <th>Qty</th>
            <th>Bonus</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {% for ln in lines %}
          <tr>
            <td>{{ ln.line_no }}</td>
            <td>{{ ln.product.product_code }} — {{ ln.product.name }}</td>
            <td>{{ ln.from_variant.sku_code }}</td>
            <td>{{ ln.to_variant.sku_code }}</td>
            <td>{{ ln.qty }}</td>
            <td>{{ ln.bonus_qty }}</td>
            <td>{{ ln.rate_snapshot }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="7">No lines</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <script>window.print();</script>
  </div>
</div>
{% endblock %}