{% extends 'frontend/base.html.twig' %}
{% import 'frontend/macro.html.twig' as macro %}

{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}

{% block meta %}
    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté" />
    <meta name="description" content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !" />
{% endblock %}

{% block body %}
    <div class="ui container">
        <header class="ui stackable grid">
            <div class="five wide column bloc-logo">
                <img class="logo-aac" src="{{ asset('assets/img/Logo-Aux-Actes-Citoyens.jpg') }}"
                     alt="logo aux actes citoyens">
            </div>
            <div class="eleven wide column bloc-title">
                <h1>
                    <img class="personnages-acc" src="{{ asset('assets/img/Personnages-AAC.jpg') }}"
                         alt="Aux actes Citoyens">
                    <span class="main-title">La plateforme numérique <br><span class="aac">« Aux actes Citoyens »</span> arrive bientôt !</span>
                </h1>
            </div>
        </header>
        <div class="hidden bloc-video-mobile">
            <iframe width="100%" height="350px" src="https://www.youtube.com/embed/1dC1OoIi87o"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
        </div>
        <div class="ui stackable grid">
            <div class="five wide column">
                <h2>En attendant,<br>rejoignez-nous !</h2>

                <ul>
                    <li>
                        <button class="ui button yellow">
                            <a href="{{ asset('assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf') }}"
                               title="Découvrir" target="_blank">Découvrir</a>
                        </button>
                    </li>
                    <li>
                        <button class="ui button green">
                            <a href="{{ asset('assets/pdf/Dossier-Partenariat-web.pdf') }}" title="Dossier partenariat"
                               target="_blank">Dossier partenariat</a>
                        </button>
                    </li>
                    <li>
                        <button class="ui button orange">
                            <a href="" title="Nous rejoindre !">{{ macro.email_contact() }}</a>
                        </button>
                    </li>
                </ul>

                <div>
                    <a href="https://www.lacooperativedescitoyens.fr/" title="lacooperativedescitoyens" target="_blank">
                        <img class="logo-coop" src="{{ asset('assets/img/Logo-Cooperative-Citoyens.jpg') }}"
                             alt="la cooperative des citoyens">
                    </a>
                </div>
            </div>
            <div class="eleven wide column bloc-video hidden-mobile">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/1dC1OoIi87o"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
            </div>
        </div>
        <footer>
            <div class="ui grid">
                <div class="column sixteen wide">
                    <!--<a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a> - -->
                    Création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
                </div>
            </div>
        </footer>
    </div>
{% endblock %}