{% extends "base.html" %}
{% block title %}Transfer {{ transfer.reference }}{% endblock %}
{% block content %}
<div class="space-y-4">
  <div class="flex justify-between items-start">
    <div>
      <h1 class="text-2xl font-bold">{{ transfer.reference }}</h1>
      <p class="opacity-70">{{ transfer.from_location }} → {{ transfer.to_location }}</p>
      <p>Status: <strong>{{ transfer.get_status_display }}</strong></p>
    </div>
    <div class="flex gap-2">
      {% if transfer.status == 'requested' %}
      <a href="{% url 'inventory:transfer_approve' transfer.pk %}" class="btn btn-success btn-sm">Approve</a>
      {% endif %}
      {% if transfer.status == 'approved' %}
      <a href="{% url 'inventory:transfer_complete' transfer.pk %}" class="btn btn-primary btn-sm">Complete</a>
      {% endif %}
    </div>
  </div>

  <div class="card bg-base-100 border border-base-200">
    <div class="overflow-x-auto">
      <table class="table table-zebra">
        <thead><tr><th>Product</th><th>Qty</th><th>Batch</th><th>Serial</th></tr></thead>
        <tbody>
          {% for item in transfer.items.all %}
          <tr>
            <td>{{ item.product }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.batch|default:"-" }}</td>
            <td>{{ item.serial|default:"-" }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="text-center opacity-70">No items.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}