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

{% block extra_css %}
<style>
    /* Packet-level section styling */
    .packet-level-section {
        padding: 0.75rem;
        background: #f8f9fa;
        border-left: 3px solid #28a745;
        margin-bottom: 1rem;
    }

    /* Category section styling */
    .category-section {
        margin-bottom: 1.5rem;
    }

    .category-header {
        padding: 0.75rem;
        background: #f8f9fa;
        border-left: 3px solid #0066cc;
        margin-bottom: 0.5rem;
    }

    .category-header-content {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
    }

    /* Finalist container and items */
    .finalist-container {
        background: white;
        border: 1px solid #dee2e6;
        margin-bottom: 1rem;
    }

    .finalist-item {
        padding: 0.75rem;
        border-bottom: 1px solid #dee2e6;
        background: #fafafa;
    }

    .finalist-item:last-child {
        border-bottom: none;
    }

    /* Button styling */
    .expand-collapse-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Section description styling */
    .section-description {
        color: #666;
        font-size: 0.9em;
    }
</style>
{% endblock %}

{% block content %}
    <div class="p-5 bg-body-tertiary">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center">{{ packet.name }}</h1>
                {% if not packet.enabled %}
                    <div class="alert alert-warning">
                        You have been given preview access to the packet; please
                        be aware that it might change, and that the contents are
                        not to be shared until it is made public.
                    </div>
                {% endif %}
                {% include "hugopacket/bits/welcome.html" %}
            </div>
        </div>

        {% for section_data in section_tree %}
            {% include "hugopacket/bits/section.html" with section_data=section_data depth=0 %}
        {% endfor %}

        {% if orphan_files %}
            <div class="row mt-4">
                <div class="col-12">
                    <h2>Other Files</h2>
                    {% for packet_file in orphan_files %}
                        {% include "hugopacket/bits/packet_file.html" with packet=packet_file %}
                        {% if not forloop.last %}<hr>{% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all collapse elements
    const collapseElements = document.querySelectorAll('.collapse');
    
    collapseElements.forEach(function(collapseEl) {
        // Listen for collapse shown event (when expanding)
        collapseEl.addEventListener('shown.bs.collapse', function() {
            const btn = document.querySelector('[data-bs-target="#' + collapseEl.id + '"]');
            if (btn) {
                btn.textContent = 'Collapse All in Category';
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-outline-danger');
            }
        });
        
        // Listen for collapse hidden event (when collapsing)
        collapseEl.addEventListener('hidden.bs.collapse', function() {
            const btn = document.querySelector('[data-bs-target="#' + collapseEl.id + '"]');
            if (btn) {
                btn.textContent = 'Show All in Category';
                btn.classList.remove('btn-outline-danger');
                btn.classList.add('btn-outline-primary');
            }
        });
    });
});
</script>
{% endblock %}