{% extends 'base.html.twig' %}

{% block title %}Redes sociais — {{ site.schoolName }}{% endblock %}
{% block meta_description %}Siga o Colégio Mônaco no Instagram, Facebook, YouTube e outras redes. Acompanhe o dia a dia da escola em Votorantim.{% endblock %}

{% block body %}
<section class="page-hero">
    <div class="wrap">
        <h1>Redes sociais</h1>
        <p class="lead">Siga, compartilhe e acompanhe o dia a dia da escola.</p>
    </div>
</section>
<div class="wrap social-page">
    <div class="social-cards">
        {% for social in socialNetworks %}
            <a class="social-card social-card--{{ social.networkKey }}" href="{{ social.url }}" target="_blank" rel="noopener">
                <i class="{{ social.icon }}"></i>
                <strong>{{ social.name }}</strong>
                <span>Abrir perfil</span>
            </a>
        {% endfor %}
    </div>

    <div class="embed-grid">
        {% if site.instagramEmbedHtml %}
            <div class="embed-box">
                <h2>Instagram</h2>
                {{ site.instagramEmbedHtml|raw }}
            </div>
        {% elseif site.instagramUrl %}
            <div class="embed-box">
                <h2>Instagram</h2>
                <blockquote class="instagram-media" data-instgrm-permalink="{{ site.instagramUrl }}" data-instgrm-version="14"></blockquote>
                <script async src="https://www.instagram.com/embed.js"></script>
            </div>
        {% endif %}

        {% if site.facebookEmbedHtml %}
            <div class="embed-box">
                <h2>Facebook</h2>
                {{ site.facebookEmbedHtml|raw }}
            </div>
        {% elseif site.facebookUrl %}
            <div class="embed-box">
                <h2>Facebook</h2>
                <iframe title="Facebook" src="https://www.facebook.com/plugins/page.php?href={{ site.facebookUrl|url_encode }}&tabs=timeline&width=500&height=560&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true" width="100%" height="560" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
            </div>
        {% endif %}

        {% if site.youtubeUrl %}
            <div class="embed-box">
                <h2>YouTube</h2>
                {% if site.youtubeVideoId %}
                    <iframe title="YouTube" src="https://www.youtube.com/embed/{{ site.youtubeVideoId }}" allowfullscreen></iframe>
                {% endif %}
                <p><a class="btn btn-ghost" href="{{ site.youtubeUrl }}" target="_blank" rel="noopener">Inscrever-se no canal</a></p>
            </div>
        {% endif %}
    </div>

    {% for social in socialNetworks %}
        {% if social.embedHtml %}
            <div class="embed-box">
                <h2>{{ social.name }}</h2>
                {{ social.embedHtml|raw }}
            </div>
        {% endif %}
    {% endfor %}
</div>
{% endblock %}