{% extends 'main.html' %}

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

    <div class="d-flex justify-content-between align-items-center mb-1">
        <h3>Collection Locations: <i>{{ species.name }}</i></h3>
        <a class="btn btn-secondary" href="{% url 'species' species.id %}">← Back to Species</a>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    {% if locations %}
    <table class="table table-sm table-hover table-bordered mt-3">
        <thead class="table-light">
            <tr>
                <th>Name</th>
                <th>Verified</th>
                <th>Created</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for loc in locations %}
            <tr>
                <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>
                <td>
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'editSpeciesCollectionLocation' loc.id %}">Edit</a>
                    <a class="btn btn-sm btn-outline-danger" href="{% url 'deleteSpeciesCollectionLocation' loc.id %}">Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <p class="text-muted mt-3">No collection locations defined for this species yet.</p>
    {% endif %}

    <div class="mt-3">
        <a class="btn btn-secondary" href="{% url 'createSpeciesCollectionLocation' species.id %}">➕ Add Collection Location</a>
    </div>

</div>
{% endblock content %}