{% extends "base.html" %}
{% load static %}
{% block content %}
    <section class="main">
        <div class="container">
            <h1><span>Choisir un avenir sans crises,</span> c'est maintenant ou jamais !</h1>

            <hr>
            <div class="stats flex-col">
                <div class="flex-row flex-sb ac-center"><p id="stats">{{ counter }}</p><img
                        src="{% static "appel_crises/img/team.svg" %}" alt="Icon d'équipe" style="align-self: center">
                </div>
                <p class="text-center">Citoyens soutiennent l'appel</p>
            </div>
        </div>
    </section>
    <section class="f-section bg-colored">
        <div class="container">
            <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus nisi quis ex
                fringilla, nec fermentum justo venenatis. Vestibulum eu leo nunc. Quisque ornare dolor in lorem
                pellentesque porttitor. Fusce ac iaculis justo. Donec ultricies tortor vel quam blandit, in imperdiet
                augue euismod. Nunc condimentum lacus vitae dui porta viverra. In vitae congue felis. Curabitur sagittis
                tincidunt augue luctus aliquet. Fusce egestas maximus dui, vel fringilla sem sollicitudin quis. Etiam
                pharetra nunc eu cursus egestas. Quisque vitae leo auctor, imperdiet tellus non, convallis lorem. In et
                metus et felis ornare lobortis. Sed sed ipsum sed nulla pellentesque maximus id eget nunc. In nisl
                felis, malesuada vitae mollis tempor, aliquam sed justo. Vestibulum ante ipsum primis in faucibus orci
                luctus et. </p>
            <a href="#form">signer l'appel</a>
        </div>
    </section>
    <section>
        <div class="container">
            <h2>Section title</h2>
            <hr>
            <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id varius neque, vel
                porttitor lorem. Mauris eget dolor et ipsum mollis ultrices vel eget augue. Proin rhoncus libero quis
                eros ultrices, ut volutpat nulla rutrum. Fusce vitae ipsum quis dolor varius volutpat. Etiam in sodales
                elit, sit amet imperdiet dolor. Etiam ante tortor, viverra et finibus eu, dapibus ut nunc. Cras
                condimentum ligula a sollicitudin euismod. Vestibulum eu lorem a diam vestibulum fringilla. Ut vitae
                mauris lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Integer vehicula nunc est, quis volutpat massa tempor eu. Aliquam convallis sagittis erat, sit amet
                sagittis justo.
                <br><br>
                Maecenas non ipsum ut augue pellentesque condimentum. Phasellus quis sem at nunc commodo pharetra. Morbi
                rutrum rutrum turpis quis tincidunt. Maecenas nec aliquet metus, vitae vehicula ante. Integer in eros
                eget dui elementum rutrum non suscipit ipsum. Fusce molestie consequat eros, non sagittis nibh feugiat
                vehicula. Phasellus urna metus, vehicula a mi vel, volutpat bibendum est. Donec sem turpis, rutrum ac
                accumsan eget, hendrerit sit amet quam. Donec tempus tortor id elit pretium, tincidunt maximus urna
                sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                <br><br>
                Suspendisse non tortor pharetra, tincidunt urna nec, tempor lectus. Etiam euismod ultricies nisl quis
                consequat. Morbi et fermentum dui. Phasellus tempus libero sit amet luctus facilisis. Fusce non placerat
                est. Sed lacinia, nulla sed viverra condimentum, felis eros ultricies velit, sed facilisis sem nisl in
                sapien. In vitae felis vitae leo dignissim ullamcorper. Quisque consequat ut diam eget tempus. Nam
                ligula augue, dapibus sed ultricies sed, vehicula quis est. Curabitur eget purus nec elit dapibus
                sollicitudin in a est. Nullam venenatis nibh dictum nisl convallis, in aliquam lectus varius. Quisque
                tempor imperdiet maximus. Nam ultricies erat non dignissim volutpat. Etiam aliquet elit sed enim
                iaculis, quis lacinia lacus imperdiet. </p>
        </div>
    </section>
    <section>
        <div class="container">
            <h2>Section title</h2>
            <hr>
            <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id varius neque, vel
                porttitor lorem. Mauris eget dolor et ipsum mollis ultrices vel eget augue. Proin rhoncus libero quis
                eros ultrices, ut volutpat nulla rutrum. Fusce vitae ipsum quis dolor varius volutpat. Etiam in sodales
                elit, sit amet imperdiet dolor. Etiam ante tortor, viverra et finibus eu, dapibus ut nunc. Cras
                condimentum ligula a sollicitudin euismod. Vestibulum eu lorem a diam vestibulum fringilla. Ut vitae
                mauris lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Integer vehicula nunc est, quis volutpat massa tempor eu. Aliquam convallis sagittis erat, sit amet
                sagittis justo.
                <br><br>
                Maecenas non ipsum ut augue pellentesque condimentum. Phasellus quis sem at nunc commodo pharetra. Morbi
                rutrum rutrum turpis quis tincidunt. Maecenas nec aliquet metus, vitae vehicula ante. Integer in eros
                eget dui elementum rutrum non suscipit ipsum. Fusce molestie consequat eros, non sagittis nibh feugiat
                vehicula. Phasellus urna metus, vehicula a mi vel, volutpat bibendum est. Donec sem turpis, rutrum ac
                accumsan eget, hendrerit sit amet quam. Donec tempus tortor id elit pretium, tincidunt maximus urna
                sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                <br><br>
                Suspendisse non tortor pharetra, tincidunt urna nec, tempor lectus. Etiam euismod ultricies nisl quis
                consequat. Morbi et fermentum dui. Phasellus tempus libero sit amet luctus facilisis. Fusce non placerat
                est. Sed lacinia, nulla sed viverra condimentum, felis eros ultricies velit, sed facilisis sem nisl in
                sapien. In vitae felis vitae leo dignissim ullamcorper. Quisque consequat ut diam eget tempus. Nam
                ligula augue, dapibus sed ultricies sed, vehicula quis est. Curabitur eget purus nec elit dapibus
                sollicitudin in a est. Nullam venenatis nibh dictum nisl convallis, in aliquam lectus varius. Quisque
                tempor imperdiet maximus. Nam ultricies erat non dignissim volutpat. Etiam aliquet elit sed enim
                iaculis, quis lacinia lacus imperdiet. </p>
        </div>
    </section>
    <section class="appel">
        <div class="container">
            <h2 class="text-center">Ils portent l'appel !</h2>
            <div class="flex-row flex-sb">
                <div class="column flex-col">
                    <h3>Asso 1</h3>
                    <ul>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                    </ul>
                    <h3>Asso 2</h3>
                    <ul>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                    </ul>
                </div>
                <div class="column flex-col">
                    <h3>Asso 3</h3>
                    <ul>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                    </ul>
                </div>
                <div class="column flex-col">
                    <h3>Asso 4</h3>
                    <ul>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                        <li><a href="">Lorem Ipsum</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section id="form" class="form bg-colored">
        <div class="container">
            <p class="title">Nous sommes déjà <strong>7000</strong> citoyens et 20 organisations à soutenir cet appel
                pour un avenir sans crise.</p>
            <hr/>
            <form action="{% url 'sign' %}" method="POST">
                {% csrf_token %}
                <div class="flex-row flex-sb ac-center">
                    <div class="display-if-js">
                        <input type="text" placeholder="Prénom" name="firstname" required>
                        <input type="text" placeholder="Nom" name="surname" required>
                        <input type="email" placeholder="Email" name="email" required>
                    </div>

                    <div class="social">
                        <p class="title">Partager sur les réseaux</p>
                        <div class="social-icons flex-row">
                            <a href=""><img src="{% static "appel_crises/img/facebook-neon.svg" %}"
                                            alt="Logo Facebbok"></a>
                            <a href=""><img src="{% static "appel_crises/img/twitter-neon.svg" %}" alt="Logo Twitter"></a>
                            <a href=""><img src="{% static "appel_crises/img/instagram-neon.svg" %}"
                                            alt="Logo Instagram"></a>
                            <a href=""><img src="{% static "appel_crises/img/linkedin-neon.svg" %}"
                                            alt="Logo LinkedIn"></a>
                        </div>
                    </div>
                </div>

                <div class="display-if-js">
                    <input type="checkbox" id="newsletter">
                    <label for="newsletter">Accepter la première condition</label><br>
                    <input type="checkbox" id="other"> <label for="other">Accepter l'autre condition</label>
                    <input type="submit" value="Signer l'appel" class="button">
                </div>
                <a href="{% url 'form-no-js' %}" class="remove-if-js">
                    <input type="submit" value="Signer l'appel" class="button">
                </a>
            </form>
            <small>
                Vos données personnelles collectées resteront strictement confidentielles. Elles ne seront ni
                vendues ni échangées conformément à <a>nos mentions légales</a>.
                L'exercice de vos droits, dont la désinscription, est possible à tout moment, voir
                <a>nos mentions légales</a>.
            </small>
        </div>
    </section>
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">{% include "js/home.js" %}</script>
{% endblock %}
