{% load static wagtailimages_tags wagtailcore_tags %}
<!-- Footer -->
<footer class="footer_generico">
    <div class="footer-content_semana">
        <div class="footer-logo_semana">
            <!-- Logo do Footer -->
            <div class="wrapper-logo-hero_semana">
                {% if value.logo %}
                    {% image value.logo width-400 as logo_img %}
                    <img src="{{ logo_img.url }}" 
                         alt="Logos"
                         class="logo-image">
                {% endif %}
            </div>
            <div style="height:60px;"></div>

            <!-- Dados do Evento -->
            <div class="evento-texto">
                {% if value.texto_logo %}
                    {{ value.texto_logo }}
                {% endif %}
            </div>
        </div>

        <!-- Links de Navegação -->
        {% if value.links_1 %}
        <div class="footer-links_generico">
            <p>{{ value.titulo_1 }}</p>
            <ul>
                {% for link in value.links_1 %}
                <li>
                    {% if link.value.link_url %}
                    <a href="{{ link.value.link_url }}">{{ link.value.title }}</a>
                    {% else %}
                    <p>{{ link.value.title }}</p>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if value.links_2 %}
        <div class="footer-links_generico">
            <p>{{ value.titulo_2 }}</p>
            <ul>
                {% for link in value.links_2 %}
                <li>
                    {% if link.value.link_url %}
                    <a href="{{ link.value.link_url }}">{{ link.value.title }}</a>
                    {% else %}
                    <p>{{ link.value.title }}</p>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if value.links_3 %}
        <div class="footer-links_generico">
            <p>{{ value.titulo_3 }}</p>
            <ul>
                {% for link in value.links_3 %}
                <li>
                    {% if link.value.link_url %}
                    <a href="{{ link.value.link_url }}">{{ link.value.title }}</a>
                    {% else %}
                    <p>{{ link.value.title }}</p>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</footer>

<style>
.footer_generico{
    background: {{value.cor_fundo}};
    color: {{value.cor_texto}};
    padding: 60px 20px;
    background-size: 40px 40px;
}

.footer-links_generico p{
    font-size: 20px;
    font-weight: 500;
    color: {{value.cor_texto}};
    margin: 0px;
    margin-bottom: 16px;
}

.footer-links_generico ul{
    margin: 0px;
    padding: 0px;
}

.footer-links_generico ul li{
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 16px;
    text-decoration: underline;
}

.footer-links_generico ul li a{
    color: {{value.cor_texto}};
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
}

.footer-links_generico ul li p{
    color: {{value.cor_texto}};
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.material-symbols-outlined{
    color: {{value.cor_texto}};
}
</style>