{% 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 Reference Links</h4>
                </div>
                <div class="card-body px-4 py-3">
                    <p class="text-muted">
                        Upload a CSV file to import Species Reference Links.
                        The CSV must include the following columns:
                    </p>
                    <p>
                        <code>species, reference_url, name_prefix</code>
                    </p>
                    <p class="text-muted small">
                        Each row creates a new reference link with the name formatted as
                        <em>name_prefix: species name</em> (example: <em>Fishbase: Limia islai</em>).
                        Species names are matched using a case-insensitive exact match after trimming spaces.
                    </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>Imported successfully:</strong> {{ summary.success_count }}<br>
                        <strong>Errors:</strong> {{ summary.error_count }}
                    </p>
                    {% if summary.errors %}
                    <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.errors %}
                            <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 %}