{% extends 'base.html' %}
{% block title %}Suppliers{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">Suppliers</h1>
  <a href="{% url 'inventory:supplier_create' %}" class="btn btn-primary btn-sm">➕ Add Supplier</a>
</div>

<form method="get" class="flex gap-2 mb-4">
  <input type="text" name="q" value="{{ query }}"
         placeholder="Search supplier..."
         class="input input-bordered input-sm w-64"/>
  <button class="btn btn-primary btn-sm">🔍 Search</button>
  <a href="{% url 'inventory:supplier_list' %}" class="btn btn-ghost btn-sm">Reset</a>
</form>

<div class="card bg-base-100 shadow">
  <div class="card-body p-0">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Name</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Total Purchases</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for supplier in suppliers %}
        <tr>
          <td class="font-medium">{{ supplier.name }}</td>
          <td>{{ supplier.phone|default:"—" }}</td>
          <td>{{ supplier.email|default:"—" }}</td>
          <td>{{ supplier.total_purchases|floatformat:0 }}</td>
          <td class="flex gap-1">
            <a href="{% url 'inventory:supplier_detail' supplier.pk %}" class="btn btn-ghost btn-xs">View</a>
            <a href="{% url 'inventory:supplier_edit' supplier.pk %}" class="btn btn-ghost btn-xs">Edit</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="5" class="text-center text-base-content/40 py-10">
            No suppliers yet.
            <a href="{% url 'inventory:supplier_create' %}" class="link link-primary">Add first supplier</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}