{% 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">Participation Details</h1>
            <p class="text-muted fs-5">Select your role and thematic area for the conference.</p>
        </div>

        <form method="post" action="{% url 'participation' %}">
            {% 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;">school</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Academic Participation</h4>
                        </div>
                        <div class="form-dark-theme">
                            {{ 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>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const typeSelect = document.getElementById('id_presentation_type');
        const themeField = document.getElementById('div_id_theme');
        const abstractTitleField = document.getElementById('div_id_abstract_title');
        const authorsField = document.getElementById('div_id_authors');
        const keywordsField = document.getElementById('div_id_keywords');
        const categoryField = document.getElementById('div_id_presentation_category');

        function toggleFields() {
            if(typeSelect.value === 'LISTENER') {
                if(themeField) themeField.style.display = 'none';
                if(abstractTitleField) abstractTitleField.style.display = 'none';
                if(authorsField) authorsField.style.display = 'none';
                if(keywordsField) keywordsField.style.display = 'none';
                if(categoryField) categoryField.style.display = 'none';
            } else {
                if(themeField) themeField.style.display = 'block';
                if(abstractTitleField) abstractTitleField.style.display = 'block';
                if(authorsField) authorsField.style.display = 'block';
                if(keywordsField) keywordsField.style.display = 'block';
                if(categoryField) categoryField.style.display = 'block';
            }
        }
        
        if (typeSelect) {
            typeSelect.addEventListener('change', toggleFields);
            toggleFields();
        }
    });
</script>
{% endblock %}