{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container py-5 mt-4" style="min-height: calc(100vh - 80px);">
    
    {% include 'dashboard/_wizard_nav.html' %}

    <main class="col-12 mt-2">
        <div class="text-center mb-5 fade-in-up">
            <h1 class="serif-heading display-5 text-white mb-2">Field Trip</h1>
            <p class="text-muted fs-5">Would you like to join the post-conference field trip?</p>
        </div>

        <form method="post" action="{% url 'trip' %}">
            {% csrf_token %}
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="b-card fade-in-up">
                        <div class="d-flex align-items-center mb-4 pb-3 border-bottom" style="border-color: rgba(255,255,255,0.05) !important;">
                            <span class="material-icons me-3" style="color: var(--primary-gold); font-size: 28px;">explore</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Trip Details</h4>
                        </div>
                        
                        <div class="d-flex align-items-center mb-4 p-4 rounded-4" style="background: rgba(106,142,97,0.1); border: 1px solid rgba(106,142,97,0.3);">
                            <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center me-4" style="width: 50px; height: 50px; border: 1px solid var(--highlight-sage);">
                                <span class="material-icons" style="color: var(--highlight-sage);">forest</span>
                            </div>
                            <div>
                                <h5 class="text-white mb-1 fw-bold">Achanakmar Tiger Reserve</h5>
                                <p class="text-muted mb-0 small">Join us for a guided ecological tour in the rich biodiverse forests of Achanakmar on Nov 23, 2026.</p>
                            </div>
                        </div>
                        
                        <div class="form-dark-theme mt-4">
                            {{ form|crispy }}
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end mt-5 mb-5 fade-in-up" style="animation-delay: 0.1s;">
                        <button type="submit" class="btn b-btn-primary px-3 px-md-5 py-3 shadow-lg d-flex align-items-center rounded-pill">
                            <span class="fw-bold me-2">Save & Continue</span>
                            <span class="material-icons">arrow_forward</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </main>
</div>
{% endblock %}