{% load wagtailimages_tags %}

{% if value.background_imagem %}
    {% image value.background_imagem original as bg_img %}
{% endif %}

<section class="equipe-evento-section"
    {% if value.background_imagem %}
        style="background-image: url('{{ bg_img.url }}'); background-size: cover; background-position: center; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
    {% elif value.background_cor %}
        style="background-color: {{ value.background_cor }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
    {% elif value.mostrar_linha %}
        style="border-bottom: 16px solid {{ value.cor_linha }};"
    {% endif %}
>
    <div class="equipe-evento-container">

        {% if value.titulo or value.subtitulo %}
        <div class="equipe-evento-header">
            {% if value.titulo %}
            <h2 class="equipe-evento-titulo" style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">{{ value.titulo }}</h2>
            {% endif %}
            {% if value.subtitulo %}
            <p class="equipe-evento-subtitulo" style="color: {{ value.cor_subtitulo|default:'#FFFFFF' }};">{{ value.subtitulo }}</p>
            {% endif %}
        </div>
        {% endif %}

        <div class="equipe-evento-grid">

            <!-- Coluna Esquerda: Imagem -->
            {% if value.imagem %}
            <div class="equipe-evento-imagem-col">
                {% image value.imagem original as img %}
                <img src="{{ img.url }}" alt="{{ value.alt_imagem|default:'' }}" class="equipe-evento-imagem">
            </div>
            {% endif %}

            <!-- Coluna Direita: Categorias + Nomes -->
            <div class="equipe-evento-conteudo-col">
                <div class="equipe-evento-card" id="equipe-card-{{ block_id|default:'0' }}">
                    <div class="equipe-evento-card-inner">
                        {% for categoria in value.categorias %}
                        <div class="equipe-evento-categoria">
                            <h3 class="equipe-evento-categoria-titulo"
                                style="color: {{ categoria.cor_titulo_categoria|default:'#BAC946' }};">
                                {{ categoria.titulo_categoria }}
                            </h3>
                            <ul class="equipe-evento-nomes">
                                {% for item in categoria.nomes %}
                                <li class="equipe-evento-nome"
                                    style="color: {{ item.cor_nome|default:'#FFFFFF' }};">
                                    {{ item.nome }}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                {% if value.texto_botao %}
                <div class="equipe-evento-botao-wrapper">
                    <button
                        class="equipe-evento-botao"
                        style="background-color: {{ value.cor_botao|default:'#BAC946' }}; color: {{ value.cor_texto_botao|default:'#132929' }};"
                        onclick="toggleEquipeEvento(this)"
                        data-card="equipe-card-{{ block_id|default:'0' }}"
                        data-texto-mais="{{ value.texto_botao|default:'Ver mais' }}"
                        data-texto-menos="Ver menos"
                    >
                        {{ value.texto_botao|default:"Ver mais" }}
                    </button>
                </div>
                {% endif %}
            </div>

        </div>
    </div>
</section>

<style>
.equipe-evento-section {
    padding: 60px 20px;
}

.equipe-evento-container {
    max-width: 1200px;
    margin: 0 auto;
}

.equipe-evento-header {
    text-align: center;
    margin-bottom: 40px;
}

.equipe-evento-titulo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.equipe-evento-subtitulo {
    font-size: 1.1rem;
    opacity: 0.9;
}

.equipe-evento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .equipe-evento-grid {
        grid-template-columns: 1fr;
    }
}

.equipe-evento-imagem-col {
    position: sticky;
    top: 20px;
}

.equipe-evento-imagem {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.equipe-evento-conteudo-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.equipe-evento-card {
    max-height: 600px;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
    padding: 24px;
    background-color: rgba(255, 255, 255, 1);
}

.equipe-evento-card.expandido {
    max-height: none;
}

.equipe-evento-card:not(.expandido)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}

.equipe-evento-card-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.equipe-evento-categoria {
    margin-bottom: 8px;
}

.equipe-evento-categoria-titulo {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.equipe-evento-nomes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipe-evento-nome {
    font-size: 0.95rem;
    line-height: 1.5;
}

.equipe-evento-botao-wrapper {
    text-align: center;
    margin-top: 8px;
}

.equipe-evento-botao {
    padding: 10px 28px;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.equipe-evento-botao:hover {
    opacity: 0.85;
}
</style>

<script>
function toggleEquipeEvento(btn) {
    var cardId = btn.getAttribute('data-card');
    var card = document.getElementById(cardId);
    var textoMais = btn.getAttribute('data-texto-mais');
    var textoMenos = btn.getAttribute('data-texto-menos');

    if (card.classList.contains('expandido')) {
        card.classList.remove('expandido');
        btn.textContent = textoMais;
    } else {
        card.classList.add('expandido');
        btn.textContent = textoMenos;
    }
}
</script>