{% extends "main.html" %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="my-0">Import CARES Species (Staging)</h4>
                </div>
                <div class="card-body px-4 py-3">
                    <p class="text-muted">
                        Upload a CSV file to stage species for review before committing to the database.
                        The CSV must include the following columns:
                    </p>
                    <p>
                        <strong>Required</strong> (column must exist; each row must have a valid value):<br>
                        <code>name, category, global_region</code>
                    </p>
                    <p>
                        <strong>Optional</strong> (blank cells use defaults shown):<br>
                        <code>alt_name, common_name, description, local_distribution,
                        cares_family (default: UDF), iucn_red_list (default: UN),
                        cares_classification (default: NOTC)</code>
                    </p>
                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        {{ form.as_p }}
                        <button type="submit" class="btn btn-primary mt-2">Upload &amp; Stage</button>
                        <a href="{% url 'tools2' %}" class="btn btn-secondary mt-2 ms-2">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}