{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Farms</h2>
    {% if current_user.role == 'admin' %}
      <a href="{{ url_for('farm_new') }}" class="btn-primary">Add Farm</a>
    {% endif %}
  </div>
  
  <!-- Live Search -->
  <div class="card" style="margin-top:8px; margin-bottom:8px;">
    <input type="text" id="farm-search" placeholder="🔍 Search farms by name, contact, address..." 
           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="farms-table">
      <thead><tr><th>Name</th><th>Contact</th><th>Address</th></tr></thead>
      <tbody>
        {% for f in farms %}
        <tr>
          <td>{{ f.name }}</td>
          <td>{{ f.contact or '-' }}</td>
          <td>{{ f.address or '-' }}</td>
        </tr>
        {% else %}
          <tr><td colspan="3" class="muted">No farms yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('farm-search', 'farms-table');
    });
  </script>
{% endblock %}