{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h1>Import Guests</h1>
        <p class="text-muted">Upload a CSV file to bulk add or update your guest list.</p>
    </div>
    <div class="col-md-4 text-md-end">
        <a href="{% url 'guest_list' %}" class="btn btn-outline-secondary">Back to List</a>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card p-4">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="mb-4">
                    <label for="csv_file" class="form-label fw-bold">Select CSV File</label>
                    <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
                    <div class="form-text mt-2">Maximum file size: 5MB</div>
                </div>
                
                <button type="submit" class="btn btn-teal w-100 py-2">
                    <i class="bi bi-upload me-2"></i> Start Import
                </button>
            </form>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card p-4 border-0 bg-light">
            <h5 class="fw-bold mb-3">CSV Format Requirements</h5>
            <p>Your CSV file should include a header row with the following column names:</p>
            <ul class="list-group list-group-flush bg-transparent">
                <li class="list-group-item bg-transparent px-0 border-0">
                    <code class="fw-bold">first_name</code> (Required)
                </li>
                <li class="list-group-item bg-transparent px-0 border-0">
                    <code class="fw-bold">last_name</code> (Required)
                </li>
                <li class="list-group-item bg-transparent px-0 border-0">
                    <code class="fw-bold">email</code> (Required, used for matching)
                </li>
                <li class="list-group-item bg-transparent px-0 border-0">
                    <code class="fw-bold">phone</code> (Optional)
                </li>
            </ul>
            
            <div class="mt-4 p-3 bg-white rounded border">
                <p class="small text-muted mb-2">Example Content:</p>
                <code class="small d-block">first_name,last_name,email,phone</code>
                <code class="small d-block">Jane,Doe,jane@example.com,123-456-7890</code>
                <code class="small d-block">John,Smith,john@example.com,</code>
            </div>
        </div>
    </div>
</div>

<style>
    .btn-teal {
        background-color: var(--accent-teal);
        color: white;
    }
    .btn-teal:hover {
        background-color: #0b7a6f;
        color: white;
    }
</style>
{% endblock %}
