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

{% block content %}

  <div class="columns large-12 home_top">
    {% if page.header.activate_top == true %}
    {% set top = page.find(page.header.top) %}
    <div class="une row" style="background-image:url('{{top.url}}/{{top.header.media_thumbnail}}'); left:0;">
      <div class="columns small-3 bl">
        <h1>A la une</h1>
      </div>
      <div class="columns small-12 small-offset-0">
        <div class="row">
          <div class="columns medium-6 small-8 small-offset-1 ">
            <a  href="{{top.url}}">

            <mark>{{top.title}}</mark>
            <span class="tag" ><span>{{ top.header.taxonomy.tag|first }}</span></span>
            </a>
          </div>
        </div>

      </div>
      <div class="columns large-12 close_col">
        <a href="#" class="close"></a>
      </div>
    </div>
    {% endif %}
    <div  class="row">
      <div id="carousel" class="columns small-12">
        {% for image_list in page.header.gallery %}
        {% set elem = page.find(image_list.url) %}
        <div class='content'>
          <a href="{{base_url}}{{image_list.url}}">
            <mark>{{elem.title}}</mark>
            <img src="{{page.url}}/{{ image_list.image }}" alt="">
            
          </a>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="columns large-4 medium-12 small-12">
  </div>
  <div class="large-7 medium-12 medium-offset-0 small-10 small-offset-1 intro">
    {{ page.content }}
    {# {% if lang == "fr" %}
      <a class="seemore" href="le-mouvement"> Qui sommes-nous ? </a>
    {% else %}
      <a class="seemore" href="le-mouvement"> Who are we ? </a>
    {% endif %} #}
    
  </div>
  <div class="columns small-4 small-offset-1 big_buttons home_button" >
    <a href="le-mouvement" style="background:url('{{ url('theme://images/photo_home_qui.jpg') }}') rgba(233, 77, 26, 0.4);">
    {% if lang == "fr" %}
      <h3 class="inter"> Qui sommes-nous ?</h3>
    {% else %}
      <h3 class="inter"> Who are we ?</h3>
    {% endif %}
    {# <img src="{{ url('') }}" alt=""> #}
    </a>
  </div>
  <div class="columns small-3 big_buttons home_button" >
    
    {% if lang == "fr" %}
      <a target="_blank" href="le-mouvement#devenir-membre" style="background:url('{{ url('theme://images/photo_home_membre.jpg') }}') rgb(  233, 77, 26);">
      <h3 class="inter">Devenir Membre</h3>
    {% else %}
      <a target="_blank" href="e/en/le-mouvement#become-a-member" style="background:url('{{ url('theme://images/photo_home_membre.jpg') }}') rgb(  233, 77, 26);">
      <h3 class="inter">Become a member</h3>
    {% endif %}
    {# <img src="" alt=""> #}
    </a>
  </div>
  <div class="columns small-3 big_buttons home_button" >
    <a target="_blank" href="https://www.helloasso.com/associations/tournons-la-page/formulaires/1" style="background:url('{{ url('theme://images/photo_home_soutenir.jpg') }}') rgb(  233, 77, 26);">
    {% if lang == "fr" %}
      <h3 class="inter">Nous soutenir</h3>
    {% else %}
      <h3 class="inter">Make a donation</h3>
    {% endif %}
   {#  <img src="" alt=""> #}
    </a>
  </div>

  <div class="columns small-12">
    <br><br>
  </div>

  <div class="footer columns large-10 large-offset-1">
        {% include 'partials/footer_coa.html.twig' %}
  </div>

  <!-- Actu  -->
  <div class="post_bottom columns large-10 large-offset-1 medium-12 small-12 ">
    <div class="row">
      <div class="columns large-10 large-offset-0 medium-10 medium-offset-0 small-12">
          <h1 class="inter" >{{ page.find('/actualites').title }}</h1>
      </div>

      {% for post in page.find('/actualites').children.remove(page.slug).order('date', 'desc').slice(0, 2) %}
          {% set source = post.header.media_thumbnail %}
          {% if source != null%}
            {% set info = "url('"~post.url~"/"~source~"')" %}
          {% else %}
            {% set info = null %}
          {% endif %}
          <div class=" columns large-6 medium-6 medium-offset-0 small-8 small-offset-2 recent-posts">
            <div  class=" row ">
              <div  class="columns large-12 thumb_news">
                <a style="background:{{ info }} rgb(  233, 77, 26);" href="{{ post.url }} ">
                  <div class="row">
                    <div class="columns large-8 align-self-bottom">
                      <mark>{{ post.title }}</mark>
                      <span class="tag" ><span>{{ post.header.taxonomy.tag|first }}</span></span>
                    </div>
                  </div>

                </a>
              </div>
            </div>
          </div>
      {% endfor %}
      {% for post in page.find('/actualites').children.remove(page.slug).order('date', 'desc').slice(2,3) %}
      {% set source = post.header.media_thumbnail %}
      {% if source != null%}
        {% set info = "url('"~post.url~"/"~source~"')" %}
      {% else %}
        {% set info = null %}
      {% endif %}
          <div  class="columns large-4 medium-4 medium-offset-0 small-8 small-offset-2 recent-posts">
            <div  class=" row ">
              <div  class="columns large-12 thumb_news">
                <a style="background:{{ info }} rgb(  233, 77, 26);" href="{{ post.url }}">
                  <div class="row">
                    <div class="columns large-11 align-self-bottom">
                      <mark>{{ post.title }}</mark>
                      <span class="tag" ><span>{{ post.header.taxonomy.tag|first }}</span></span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
      {% endfor %}
      <div class="columns large-12 medium-12 medium-offset-0 small-8 small-offset-2 ">
      {% if lang == "fr" %}
        <a class="seemore" href="actualites"> Voir toutes les actualités </a>
      {% else %}
        <a class="seemore" href="actualites"> See all the news </a>
      {% endif %}
      </div>
    </div>
  </div>
{% endblock %}