{% 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>

<div class="columns large-3 medium-3 medium-offset-0 small-10 small-offset-1 side_container">
  <div class="row">
      <div class="columns small-12 extra_content">
      {% if lang == "fr" %}
        <a href="{{page.find('\/home\/lappel').url}}" >L'appel</a>
        {% else %}
        <a href="{{page.find('\/home\/lappel').url}}" >Our plea</a>
      {% endif %}
        
      </div>
      <div class="columns small-12 extra_content">
      {% if lang == "fr" %}
        <a href="{{page.find('\/home\/5-questions').url}}" >5 questions pour comprendre la mobilisation</a>
      {% else %}
       <a href="{{page.find('\/home\/5-questions').url}}" >5 questions to understand mobilisation</a>
      {% endif %}
      </div>
      <div class="columns small-12 extra_content">
      {% if lang == "fr" %}
        <a href="{{page.find('\/membres-en-danger').url}}" >Nos membres en danger</a>
        {% else %}
        <a href="{{page.find('\/membres-en-danger').url}}" >Our members in danger</a>
      {% endif %}
      </div>
  </div>
  {% include 'partials/sidebar.html.twig' %}
</div>

  <div class="post columns large-9 medium-9 small-12">
    <div class="row">
      <div class=" columns large-1 medium-1 medium-offset-0 small-10 small-offset-1" style="height:auto;">
        <div class="row post_picto_container">
          <div class="columns large-12 medium-12 medium-offset-0 small-1 small-offset-8 ">
            <div class="post_picto">
              <a href="mailto:mail?subject={{ page.title }}&body={{uri.url}}">
              <img src="{{ url('theme:\/\/images\/contact.svg') }}" alt="">
              </a>
            </div>
          </div>
          <div class="columns large-12 medium-12 small-1">
            <div class="post_picto">
              <a href="https://www.facebook.com/sharer/sharer.php?u={{uri.url}}" target="_blank">
              <img src="{{ url('theme:\/\/images\/f.svg') }}" alt="">
              </a>
            </div>
          </div>
          <div class="columns large-12 medium-12 small-1">
            <div class="post_picto">
              <a href="https://twitter.com/intent/tweet?url={{ uri.url }}&text={{ page.title }}" target="_blank">
              <img src="{{ url('theme:\/\/images\/t.svg') }}" alt="">
              </a>
            </div>
          </div>
          <div class="columns large-12 medium-12 small-1">
            <div class="post_picto">
              <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ uri.url }}&title={{ page.title }}" target="_blank">
              <img src="{{ url('theme:\/\/images\/in.svg') }}" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
        <div class="columns  post_content podiums large-11 large-offset-0 medium-11 medium-offset-0 small-10 small-offset-1">
          {% set this_year = "now"|date('Y')|number_format %}   
 
        {% if lang == "fr" %}
            <h3 class="inter">TOP 10 DES DICTATEURS AU POUVOIR</h3>

            {% else %}
            <h3 class="inter">Top 10 dictators in power</h3>
            {% endif %}
            <p>{{ page.header.dictateurIntro }}</p>
            <br>
            <div class="row dictateurs">
              {% set max = this_year|number_format - page.header.topDic|first.years|number_format %}
              {% for dic in page.header.topDic %}
                <div class="columns small-5 dicInfo">
                  <b>
                    {{ dic.name }},<br/>
                    {{ dic.country }}
                  </b>
                </div>
                <div class="columns small-7 align-self-middle">
                  {% set c = this_year|number_format - dic.years|number_format %}
                  
                  {% set p =  c * 80 / max %}
                  <div class="chartBar" style="height:100%; width:{{ p }}%">
                    <span><b>{{ c * -1 }}</b></span>
                  </div>
                  <div class="crown" style="width:calc( 100% - {{ p }}%)">
                      <img  src="{{uri.url}}/{{ dic.dicpic }}" alt="">
                     <div class="crown_pic" style="content: url({{ url('theme:\/\/images\/crown.svg') }});" ></div>             

                  </div>
                </div>
              {% endfor %}
                <div class="columns small-5 dicInfo"></div>
                <div class="columns small-7 align-self-middle">
                  <div class="" style="height:100%; width:100%">
                    <b>{{header.classementType}}</b>
                  </div>
                </div>

            </div>
            <br><br> 
            {% if land == "fr" %}
            <h3 class="inter">Classement - Pourcentage population ayant connu une même famille ou personne au pouvoir</h3>
            {% else %}
            <h3 class="inter">Ranking - Percentage of population having known the same family or person in power</h3>
            {% endif %}
            <div class="row countries">
              {% for c in page.header.classement %}
              <div class="columns small-6 country">


                <div class="flag"><div class="percent">{{ c.perc }}%</div><img src="{{uri.url}}\/{{c.flag}}" alt=""></div>
                <div class="cinfo">
                  <span class="orange">{{c.name}}</span><br/>
                  {{ c.info }}
                </div>
              </div>
              {% endfor %}
            </div>

        </div>
    </div>
  </div>

<script type="text/javascript">
        
        if($(".crown_pic").length > 0) {
          $(".crown_pic").each(function(){
            let angle =   Math.random() * 20 - 1;
            console.log(angle);
            $(this).css("transform", "rotate("+angle+"deg)")
          });
        }

</script>


{% endblock %}