{% extends 'base.html' %}
{% block content %}
  <h2>Supplier Accounts (Farms)</h2>
  
  <!-- Live Search -->
  <div class="card" style="margin-top:8px; margin-bottom:8px;">
    <input type="text" id="farm-account-search" placeholder="🔍 Search farms by name, contact, payable amount..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>
  
  <div class="card" style="margin-top:8px">
    <table class="table" id="farm-accounts-table">
      <thead><tr><th>Farm</th><th>Contact</th><th>Payable</th><th>Actions</th></tr></thead>
      <tbody>
        {% for f in farms %}
          <tr>
            <td>{{ f.name }}</td>
            <td>{{ f.contact or '-' }}</td>
            <td>{{ (balances[f.id] if balances and f.id in balances else 0)|currency }}</td>
            <td class="actions">
              <a class="btn-outline" href="{{ url_for('farm_ledger', farm_id=f.id) }}">Ledger</a>
              <a class="btn-primary" href="{{ url_for('farm_payment', farm_id=f.id) }}">Pay</a>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="4" class="muted">No farms.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('farm-account-search', 'farm-accounts-table');
    });
  </script>
{% endblock %}