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

{% block content %}

{% include 'partials/head.html.twig' %}
<div class="columns medium-12 medium-offset-0 small-11 small-offset-1 ss_menu">
  <div class="row">
    {% for module in page.header.sections %}
      <div class="">
        <a href="#{{module.title|hyphenize}}" >{{module.title}}</a>
      </div>
    {% endfor %}
  </div>

</div>

  {% include 'partials/sidebar.html.twig' %}


  <div class="post columns small-12">
    <div class="row">

        <div class="columns  post_content large-12 large-offset-0 medium-12 medium-offset-0 small-10 small-offset-1">

          <div class="row">

            <div class="columns small-8 small-offset-4">
              {{ page.header.intro}}
            </div>

            {% for member in page.header.memberList %}

            <div class="columns medium-4 medium-offset-0 small-12 membre" id="{{member.membre|replace({' ': '_'})}}">
              {% if page.find(member.article).url %}
                <a href="{{page.find(member.article).url}}">
              {% else %}
                <a href="">
              {% endif %}

              <div class="pays">
                <mark>{{member.pays}}</mark>
              </div>
              <div class="picture">
                <img src="{{ uri.url }}/{{member.photo}}" alt="">
                <mark>{{member.membre}}</mark>
              </div>
              <div class="info">
                <div class="row">


                {% set stat = member.statut %}
                {% switch stat %}
                    {% case 'menace' %}
                    <div class="columns small-3 pic">
                      <img src="{{ url('theme://images/menace.png') }}" alt="">
                    </div>
                    <div class="columns small-8">
                      <p class="date">{{t('DANGER.MENACE')|e}} 
                        {% if  lang == "fr"  %}
                          {{member.menace|date('d')}} {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.menace|date('n') - 1)}} {{member.menace|date('Y')}}
                        {% else %}
                          {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.menace|date('n') - 1)}} {{member.menace|date('d')}}, {{member.menace|date('Y')}}
                        {% endif %}                     

                      </p>
                      <p>
                        <b>{{member.menace_type}}</b>
                      </p>
                    </div>
                    {% case 'prison' %}
                      <div class="columns small-3 pic">
                        <img src="{{ url('theme://images/prison.png') }}" alt="">
                      </div>
                      <div class="columns small-8">
                        <p class="date">{{t('DANGER.PRISON')|e}}  
                          {% if  lang == "fr"  %}
                            {{member.prison|date('d')}} {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.prison|date('n') - 1)}} {{member.prison|date('Y')}}
                          {% else %}
                            {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.prison|date('n') - 1)}} {{member.prison|date('d')}}, {{member.prison|date('Y')}}
                          {% endif %}                     

                          
                        </p>
                        <p><b>{{t('DANGER.PRISON')|e}}<br/> {{nicetime(member.prison, true, false)}}</b></p>
                      </div>

                    {% case 'free' %}
                        <div class="columns small-3 pic">
                          <img src="{{ url('theme://images/free.png') }}" alt="">
                        </div>
                        <div class="columns small-8">

                          <p class="date">{{t('DANGER.FREE')|e}}  
                             {% if  lang == "fr"  %}
                              {{member.free|date('d')}} {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.free|date('n') - 1)}} {{member.free|date('Y')}}
                            {% else %}
                              {{'GRAV.MONTHS_OF_THE_YEAR'|ta(member.free|date('n') - 1)}} {{member.free|date('d')}}, {{member.free|date('Y')}}
                            {% endif %}  

                          </p>
                          <p><b>Encore en danger</b></p>
                        </div>

                    {% default %}
                        <p>error</p>
                {% endswitch %}

                </div>
              </div>
              <div class="resume">
                {{member.text}}
              </div>
              <div class="act">
                {% if member.textreso %}
                  {% if  lang == "fr"  %}
                    <h5>Comment agir ?</h5>
                    {{ member.textreso }}
                  {% else %}
                    <h5>How to act ?</h5>
                    {{ member.textreso }}
                  {% endif %}
                {% endif %}
                {% if  lang == "fr"  %}
                  <h5>Partager sur les réseaux</h5>
                {% else %}
                  <h5>Share on social media</h5>
                {% endif %}
                <div class="row">

                  <div class="columns small-3 post_picto">
                    <a href="mailto:mail?subject={{ page.title }}&body={{ uri.url }}#{{member.membre|replace({' ': '_'})}}">
                      <img src="{{ url('theme://images/contact.svg') }}" alt="">
                    </a>
                  </div>
                  <div class="columns small-3 post_picto">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{uri.url}}#{{member.membre|replace({' ': '_'})}}" target="_blank">
                      <img src="{{ url('theme://images/f.svg') }}" alt="">
                    </a>
                  </div>
                  <div class="columns small-3 post_picto">
                    <a href="https://twitter.com/intent/tweet?url={{uri.url}}#{{member.membre|replace({' ': '_'})}}&text={{ page.title }}" target="_blank">
                      <img src="{{ url('theme://images/t.svg') }}" alt="">
                    </a>
                  </div>
                  <div class="columns small-3 post_picto">
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ uri.url }}#{{member.membre|replace({' ': '_'})}}&title={{ page.title }}" target="_blank">
                      <img src="{{ url('theme://images/in.svg') }}" alt="">
                    </a>
                  </div>
                </div>
              </div>

            </a>
            </div>



            {% endfor %}
          </div>
          {% if   page.header.datavis == 1 %}
          <div id="datavis" class="columns large-12 large-offset-0 medium-12 medium-offset-0 small-10 small-offset-1" >
            <h2>{{ page.header.datavis_title}}</h2>
            <p>{{ page.header.datavis_text}}</p>
             {% set data = getJson() %}
          </div>
          {% endif %}

      </div>
    </div>
  </div>
  {% if   page.header.datavis == 1 %}
  <div class="overlay_danger">
    <div class="row">
      
      {% set coa_page = page.find("/coalitions") %}
      {% set c = 0 %}
      {% for coa in coa_page.children %}
         
        {% if coa.header.member|length > 0 %}
          
          {% for activist in coa.header.member %}
          
        
        <div class="columns small-10 small-offset-1 fiche" data-ref="{{c}}_{{activist.membre|replace({' ': ''})}}">
        <div class="row ">
          <div class="large-1 close-btn large-offset-11"></div>
          <div class="small-12">         
            <div class=" row description">
              <div class="small-12 medium-6">
                <img  class="member_pic" src="{{coa.url}}/{{activist.photo}}" alt="">
              </div>
              <div class="small-12 medium-6">
                <h3> {{coa.title}} </h3>

                <mark class="act_name"> {{activist.membre}} </mark>

                <p>                
                  <span class="info_date" >Arrêté·e le {{activist.prison|date('d')}} {{'GRAV.MONTHS_OF_THE_YEAR'|ta(activist.prison|date('n') - 1)}} {{activist.prison|date('Y')}} </span><br/>
                 {% if activist.free %}
                   <span class="info_date" >Libéré·e le {{activist.free|date('d')}} {{'GRAV.MONTHS_OF_THE_YEAR'|ta(activist.free|date('n') - 1)}} {{activist.free|date('Y')}} </span><br/>
                 {% else %}
                    <span class="info_date" >Toujours en prison </span><br/>
                 {% endif %}
                 <br/>
                 {{activist.text}}
                </p>
              </div>
                
            </div>
          </div>
        </div>

        
      </div>
            {% set c = c + 1 %}
          {% endfor %}
        {% endif %}
      {% endfor %}

      



    </div>
  </div>
  {% endif %}
 {% if   page.header.datavis == 1 %}
<script type="text/javascript">
  let data = {{ data|json_encode|raw }};
  displayDataviz(data);
  $( window ).resize(function() {
    $(".chart").remove();
    displayDataviz(data);
  });
  
  $(".close-btn").on("click", function(){
   /* console.log($(".overlay_danger"));*/
    $(".overlay_danger").hide();
    $("body").find('.fiche').fadeOut();
    $("body").removeClass("no-scroll");
  });
  $(".overlay_danger").on("click", function(){
   /* console.log($(".overlay_danger"));*/
    $(".overlay_danger").hide();
    $("body").find('.fiche').fadeOut();
    $("body").removeClass("no-scroll");
  });


  $("#datavis").on("click",".label_info", function(){
     let ref = $(this).data("ref");
     $("body").find('.fiche[data-ref="'+ref+'"]').fadeIn();
     $(".overlay_danger").show();
     $("body").addClass("no-scroll");


  });
  $("#datavis").on("click",".miniItem", function(){
     let ref = $(this).data("ref");

     $("body").find('.fiche[data-ref="'+ref+'"]').fadeIn();
     $(".overlay_danger").show();
     $("body").addClass("no-scroll");
     
  });
</script>
{% endif %}



{% endblock %}