{% load static %}
{% load wagtailimages_tags %}
{% block content %}
<style>
    .events-container {
        --main-color: {{ cor_principal }};
    }

    .event-category {
        background-color: var(--main-color);
    }
</style>

<section id="eventos" class="section"{% if background_style %} style="{{ background_style }}"{% endif %}>
    <div class="container">
        <div class="enap-section-header-center">
            <h2 class="enap-section-title">{{ value.titulo_secao|safe }}</h2>
            <p class="enap-section-subtitle">
                {{ value.descricao_secao }}
            </p>
        </div>

        <div class="events-container" style="--main-color: {{ cor_principal }}">
            <div class="events-filter">
                <button class="btn primary evento-filter active" data-filter="all">Todos</button>
                {% for categoria in categorias %}
                <button class="btn secondary evento-filter" data-filter="{{ categoria.slug }}">{{ categoria.nome }}</button>
                {% endfor %}
            </div>
            
            <div class="events-grid">
                {% for evento in eventos_ordenados %}
                    <a href="{{ evento.link|default:'#' }}" class="event-card" data-category="{% for cat in categorias %}{% if cat.nome == evento.categoria %}{{ cat.slug }}{% endif %}{% endfor %}" style="text-decoration: none; color: inherit; display: block;">
                            <div class="event-image">
                                {% if evento.imagem %}
                                    {% image evento.imagem fill-400x200 as img %}
                                    <img src="{{ img.url }}" alt="{{ evento.titulo }}">
                                {% endif %}
                                <div class="event-category">{{ evento.categoria }}</div>
                                <div class="event-date">
                                    <span class="day">{{ evento.data|date:"d" }}</span>
                                    <span>{{ evento.data|date:"M" }}</span>
                                </div>
                            </div>
                            <div class="event-content">
                                <h3 class="event-title">{{ evento.titulo }}</h3>
                                <div class="event-info">
                                    <div class="event-info-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <polyline points="12 6 12 12 16 14"></polyline>
                                        </svg>
                                        {{ evento.hora_inicio|time:"H:i" }} - {{ evento.hora_fim|time:"H:i" }}
                                    </div>
                                    <div class="event-info-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                            <circle cx="12" cy="10" r="3"></circle>
                                        </svg>
                                        {{ evento.local }}
                                    </div>
                                </div>
                                <p class="event-description">
                                    {{ evento.descricao }}
                                </p>
                                <div class="event-footer">
                                    <div class="available-spots {% if evento.vagas_disponiveis <= 5 %}limited-spots{% endif %}">
                                        {% if evento.vagas_disponiveis == 0 %}
                                            Evento lotado
                                        {% elif evento.vagas_disponiveis == 1 %}
                                            Última vaga disponível
                                        {% elif evento.vagas_disponiveis <= 5 %}
                                            Apenas {{ evento.vagas_disponiveis }} vagas restantes
                                        {% else %}
                                            {{ evento.vagas_disponiveis }} vagas disponíveis
                                        {% endif %}
                                    </div>
                                    <span class="btn terciary">
                                        Inscrever-se
                                        <i class="fa-solid fa-circle-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
</section>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterButtons = document.querySelectorAll('.evento-filter');
        const eventCards = document.querySelectorAll('.event-card');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                this.classList.add('active');
                
                // Get filter value
                const filterValue = this.getAttribute('data-filter');
                
                // Filter events
                eventCards.forEach(card => {
                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
{% endblock %}