{% load wagtailimages_tags %}
{% load wagtailcore_tags %}
{% load static %}
{% block content %}
<section class="course-structure">
    <div class="container-medium">
        <div class="padding-100">
            <div class="icon-title-container">
                <h2>{{ value.title }}</h2>
            </div>
            {% if value.description %}
            <div class="section-description_template">
                {{ value.description|richtext }}
            </div>
            {% endif %}
        
            <div class="modules-grid">
                {% for module in value.modules %}
                    <div class="accordion-item-v2">
                        <div class="accordion-header-v2">
                            <h3 class="module-heading">{{ module.module_title }}</h3>
                            <span class="toggle-icon">+</span>
                        </div>
                        <div class="accordion-content">
                            <p class="module-description">{{ module.module_description }}</p>
                            {% if module.module_items %}
                                <ul>
                                    {% for item in module.module_items %}
                                        <li>{{ item }}</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scriptinline %}
<script>
    if (!window.accordionScriptInitialized) {
        document.addEventListener('DOMContentLoaded', function() {
            const headers = document.querySelectorAll('.accordion-header-v2');
            
            headers.forEach(header => {
                header.addEventListener('click', function() {
                    const parentItem = this.parentElement;
                    const isActive = parentItem.classList.contains('active');
                    
                    document.querySelectorAll('.accordion-item-v2').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    if (!isActive) {
                        parentItem.classList.add('active');
                    }
                });
            });
        });

        window.accordionScriptInitialized = true;
    }
</script>
{% endblock %}