{% extends "base.html" %}

{% block title %}National Farmer Registry | NAIMS Namibia{% endblock %}

{% block content %}
<section class="container my-5">
    <div class="row align-items-center mb-4">
        <div class="col">
            <h2 class="fw-bold mb-0">National Farmer Registry</h2>
            <p class="text-muted mb-0">Manage and view all registered farmers across Namibia.</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'farmer_register' %}" class="btn btn-primary px-4 fw-bold shadow-sm">
                <i class="bi bi-plus-lg"></i> Register New Farmer
            </a>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-bold small text-uppercase">Filter by Region</label>
                    <select name="region" class="form-select shadow-none">
                        <option value="">All Regions</option>
                        {% for region in regions %}
                            <option value="{{ region.id }}" {% if selected_region == region.id %}selected{% endif %}>
                                {{ region.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success px-4 w-100 fw-bold shadow-none">Apply Filter</button>
                </div>
                {% if selected_region %}
                <div class="col-md-2">
                    <a href="{% url 'farmer_list' %}" class="btn btn-outline-secondary w-100 shadow-none">Clear</a>
                </div>
                {% endif %}
            </form>
        </div>
    </div>

    <!-- Farmer List Table -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Full Name</th>
                            <th>ID / Passport</th>
                            <th>Constituency (Region)</th>
                            <th>Contact</th>
                            <th>Date Registered</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for farmer in farmers %}
                        <tr>
                            <td class="ps-4 fw-bold text-primary">{{ farmer.name }}</td>
                            <td>{{ farmer.id_number }}</td>
                            <td>{{ farmer.constituency.name }} ({{ farmer.constituency.region.name }})</td>
                            <td>{{ farmer.phone_number|default:"N/A" }}</td>
                            <td>{{ farmer.created_at|date:"d M Y" }}</td>
                            <td class="text-end pe-4">
                                <a href="{% url 'farmer_detail' farmer.id %}" class="btn btn-sm btn-outline-primary fw-bold shadow-none px-3">View Profile</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <div class="mb-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-people text-secondary opacity-25" viewBox="0 0 16 16">
                                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724C2.307 10.637 3.27 10 4.92 10Zm3.132-4a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-1-5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"/>
                                    </svg>
                                </div>
                                <p class="mb-0">No farmers found for the selected filter.</p>
                                <a href="{% url 'farmer_register' %}" class="btn btn-sm btn-link text-primary mt-2">Add the first farmer</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
{% endblock %}