{% extends 'main.html' %}

{% block content %}
<div class="container mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Collection Locations</h3>
        <span class="text-muted">{{ total_count }} record{{ total_count|pluralize }}</span>
    </div>

    <!-- Species filter -->
    <form method="get" class="mb-3">
        <div class="input-group" style="max-width: 400px;">
            <input type="text"
                   name="species"
                   class="form-control"
                   placeholder="Filter by species name..."
                   value="{{ species_filter }}">
            <button class="btn btn-outline-secondary" type="submit">Filter</button>
            {% if species_filter %}
                <a href="{% url 'collectionLocations' %}" class="btn btn-outline-danger">Clear</a>
            {% endif %}
        </div>
    </form>

    {% if locations %}
    <table class="table table-sm table-hover table-bordered">
        <thead class="table-light">
            <tr>
                <th>Species</th>
                <th>Collection Location</th>
                <th>Verified</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            {% for loc in locations %}
            <tr>
                <td><i>{{ loc.species.name }}</i></td>
                <td>{{ loc.name }}</td>
                <td>
                    {% if loc.is_verified %}
                        <span class="badge bg-success">✓ Verified</span>
                    {% else %}
                        <span class="badge bg-warning text-dark">Unverified</span>
                    {% endif %}
                </td>
                <td><small class="text-muted">{{ loc.created|date:"Y-m-d" }}</small></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <p class="text-muted">
            {% if species_filter %}
                No collection locations found for species matching "{{ species_filter }}".
            {% else %}
                No collection locations have been added yet.
            {% endif %}
        </p>
    {% endif %}

</div>
{% endblock content %}