{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">Import Voters for {{ selected_tenant.name }}</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4">
                        <h6 class="alert-heading"><i class="bi bi-info-circle me-2"></i>CSV Format Instructions</h6>
                        <p class="mb-2 small text-muted">Please ensure your CSV file follows this column order:</p>
                        <code class="d-block bg-light p-2 rounded mb-3 small">
                            First Name, Last Name, Street Address, City, State, Zip, Phone, Email, Voter ID, District, Precinct
                        </code>
                        <p class="mb-0 small text-muted">The first row (header) will be automatically skipped.</p>
                    </div>

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-4">
                            {{ form.as_p }}
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload me-2"></i>Start Import
                            </button>
                            <a href="{% url 'voter_list' %}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}