{% extends 'main.html' %}

{% block content %}
<div class="container mt-4" style="max-width: 600px;">

    <h3>
        {% if location %}Edit{% else %}Add{% endif %}
        Collection Location — <i>{{ species.name }}</i>
    </h3>

    {% 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 %}

    <form method="post" class="mt-3">
        {% csrf_token %}
        <div class="mb-3">
            <label for="id_name" class="form-label">Location Name <span class="text-danger">*</span></label>
            <input type="text"
                   name="name"
                   id="id_name"
                   class="form-control"
                   style="max-width: 400px;"
                   maxlength="200"
                   value="{{ location.name|default:'' }}"
                   required>
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox"
                   name="is_verified"
                   id="id_is_verified"
                   class="form-check-input"
                   {% if location.is_verified %}checked{% endif %}>
            <label for="id_is_verified" class="form-check-label">Verified</label>
            <div class="form-text">Check if this location has been confirmed by a species admin.</div>
        </div>
        <button type="submit" class="btn btn-secondary">
            {% if location %}Save Changes{% else %}Add Location{% endif %}
        </button>
        <a class="btn btn-outline-secondary ms-2" href="{% url 'speciesCollectionLocations' species.id %}">Cancel</a>
    </form>

</div>
{% endblock content %}