{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'event_list' %}">Events</a></li>
                <li class="breadcrumb-item"><a href="{% url 'event_detail' event.id %}">{{ event.name|default:event.event_type }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Map Participant Fields</li>
            </ol>
        </nav>
        <h1 class="h2 mb-0">Map Participant Fields for {{ event.name|default:event.event_type }}</h1>
        <p class="text-muted">File: {{ file_name }}</p>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title fw-bold mb-3">Column Mapping</h5>
            <form method="POST" action="{% url 'import_participants_map_fields' event.id %}">
                {% csrf_token %}
                <div class="row g-3">
                    <div class="col-md-6">
                        {{ form.email_column.label_tag }}
                        {{ form.email_column }}
                        {% if form.email_column.errors %}
                            <div class="text-danger small">{% for error in form.email_column.errors %}{{ error }}{% endfor %}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        {{ form.name_column.label_tag }}
                        {{ form.name_column }}
                        {% if form.name_column.errors %}
                            <div class="text-danger small">{% for error in form.name_column.errors %}{{ error }}{% endfor %}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        {{ form.phone_column.label_tag }}
                        {{ form.phone_column }}
                        {% if form.phone_column.errors %}
                            <div class="text-danger small">{% for error in form.phone_column.errors %}{{ error }}{% endfor %}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        {{ form.participation_status_column.label_tag }}
                        {{ form.participation_status_column }}
                        {% if form.participation_status_column.errors %}
                            <div class="text-danger small">{% for error in form.participation_status_column.errors %}{{ error }}{% endfor %}</div>
                        {% endif %}
                    </div>
                    <div class="col-12">
                        {{ form.default_participation_status.label_tag }}
                        {{ form.default_participation_status }}
                        {% if form.default_participation_status.errors %}
                            <div class="text-danger small">{% for error in form.default_participation_status.errors %}{{ error }}{% endfor %}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">Continue to Import</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 py-3">
            <h5 class="mb-0 fw-bold">Detected Headers</h5>
        </div>
        <div class="card-body">
            <ul class="list-group list-group-flush">
                {% for header in headers %}
                    <li class="list-group-item">{{ header }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}