{% 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 Species Collection Locations</h4>
                </div>
                <div class="card-body px-4 py-3">
                    <p class="text-muted">
                        Upload a CSV file with columns:
                    </p>
                    <p><code>species_id, species_name, name</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; Import</button>
                        <a href="{% url 'tools2' %}" class="btn btn-secondary mt-2 ms-2">Cancel</a>
                    </form>
                </div>
            </div>

            {% if summary %}
            <div class="card shadow-sm mt-4">
                <div class="card-header">
                    <h5 class="my-0">Import Results</h5>
                </div>
                <div class="card-body px-4 py-3">
                    <p>
                        <strong>Created:</strong> {{ summary.created }}<br>
                        <strong>Skipped duplicates:</strong> {{ summary.skipped_duplicates }}<br>
                        <strong>Errors:</strong> {{ summary.errors }}
                    </p>
                    {% if summary.error_rows %}
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Row</th>
                                <th>Species</th>
                                <th>Error</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row_number, species_value, error_message in summary.error_rows %}
                            <tr>
                                <td>{{ row_number }}</td>
                                <td>{{ species_value }}</td>
                                <td class="text-danger">{{ error_message }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock content %}