{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% blocktrans %}Argelg | Qui sommes-nous ?{% endblocktrans %}{% endblock %}


{% block header %}
    {% include 'frags/nav.html' %}
{% endblock %}

{% block content %}

<section class="wrapper--full wrapper--centered banner column column--centered column--centered-w">

    {% if about %}
    <figure class="container--img banner__img">
        <img src="{{ about.image.url }}" alt="Mascotte Géomètre Liége">
    </figure>
    
  
    <div class="banner__block banner__block--right">
      <h1 class="title">Qui sommes-nous&nbsp;?</h1>
      {{ about.content|safe }}

      <a class="btn btn--white" title="Découvrez-en plus sur ArgeLg" href="#contact">Nous contacter</a>
    </div>
    {% endif %}
  </section>

    <!--<section class="section">
        <div class="map"></div>

        <div class="wrapper wrapper--centered">
            <div class="map__block">
                <h2 class="title text--color">Où nous trouver ?</h2>
    
                <p><b>Relais Postal</b></p>
                <p>Chambre Syndicale de la Construction de Liège</p>
                <p>Galerie de la Sauvenière, 5</p>
                <p>4000 Liège, BELGIQUE</p>
    
                <a class="btn" title="Découvir mon itinéraire" href="{% url 'about' %}">J'y vais&nbsp;!</a>
            </div>
    
        </div>
    </section>-->

    <section id="contact" class="wrapper wrapper--centered column column--spaced section--start">
        <div class="contact">
            <h2 class="title text--color">Envoyer un message</h2>
            <p>Vous pouvez contacter les instances de l'Association Liègeoise des Géomètres-Experts ou les membres des commissions par l'intermédiaire du formulaire ci-dessous.</p>
            <p>Le système vous enverra également une copie du message que vous posterez.</p>
        </div>

        <form class="contact--form" method="POST">
            {% csrf_token %}

            <div class="column column--spaced">
                <div class="field--small form__part">
                    {% include 'frags/form_inputs.html' with input_label="Sujet du message *" form_input=form.subject input_class="field field--full" input_placeholder=_("Le sujet de votre message") %}
                </div>

                <div class="field--small form__part">
                    {% include 'frags/form_inputs.html' with input_label="Email *" form_input=form.email input_class="field field--full" input_placeholder=_("Votre email") %}
                </div>
                
            </div>

            <div class="column column--spaced">
                <div class="field--small form__part">
                    {% include 'frags/form_inputs.html' with input_label="Nom *" form_input=form.last_name input_class="field field--full" input_placeholder=_("Votre nom") %}
                </div>

                <div class="field--small form__part">
                    {% include 'frags/form_inputs.html' with input_label="Prénom *" form_input=form.first_name input_class="field field--full" input_placeholder=_("Votre prénom") %}
                </div>
            </div>

            <div class="form__part">
                {% include 'frags/form_inputs.html' with input_label="Message *" form_input=form.message input_class="field" input_placeholder=_("Votre message") %}
            </div>

            <div class="form__part">
                <!--CAPTCHA-->
                {% include 'frags/form_inputs.html' with input_label="Captcha" form_input=form.captcha input_class="field" input_placeholder=_("Captcha") %}
            </div>

            <div class="text--right">
                <input class="btn" type="submit" value="Envoyer"> 
            </div>
        </form>
    </section>

{% endblock %}

{% block footer %}
    {% include 'frags/footer.html' %}
{% endblock %}