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

{% block content %}
{% set t = grav.uri.param('title') %}
{% set type = grav.uri.param('type') %}


{% include 'partials/head.html.twig' %}
<div class="columns medium-12 medium-offset-0 small-11 small-offset-1 ss_menu">
  <div class="row">
    <div  class="doc_b">
        {% if type and type =="doc"%}
         {% set c = "select" %}
        {% else %}
          {% set c = " " %}
        {% endif %}
        <a class="selectable {{c}}" data-type="doc"  >Documents</a>
      </div>
      <div class="doc_b">
      {% if type and type == "video"%}
         {% set c = "select" %}
      {% else %}
          {% set c = " " %}
      {% endif %}
      {% if lang == "fr" %}
        <a class="selectable {{c}}" data-type="video"   >Vidéos</a>
        {% else %}
          <a class="selectable {{c}}" data-type="video"   >Videos</a>
        {% endif %}
      </div>
      <div class="doc_b">
      {% if type and type =="images"%}
       {% set c = "select" %}
      {% else %}
        {% set c = " " %}
      {% endif %}

      {% if lang == "fr" %}
        <a class="selectable {{c}}" data-type="images"  >Photos</a>
        {% else %}
          <a class="selectable {{c}}" data-type="images"  >Pictures</a>
        {% endif %}
      </div>
      <div class="doc_b">
      {% if type and type =="pod"%}
       {% set c = "select" %}
      {% else %}
        {% set c = " " %}
      {% endif %}

      {% if lang == "fr" %}
        <a class="selectable {{c}}" data-type="pod"  >Podcasts</a>
        {% else %}
          <a class="selectable {{c}}" data-type="pod"  >Podcasts</a>
        {% endif %}
      </div>
      <div class="doc_b">
      {% if type and type =="newsletter"%}
       {% set c = "select" %}
      {% else %}
        {% set c = " " %}
      {% endif %}

      {% if lang == "fr" %}
        <a class="selectable {{c}}" data-type="newsletter"  >Newsletter</a>
        {% else %}
          <a class="selectable {{c}}" data-type="newsletter"  >Newsletter</a>
        {% endif %}
      </div>
      <div class="doc_b">
      {% if type and type =="media"%}
       {% set c = "select" %}
      {% else %}
        {% set c = " " %}
      {% endif %}

      {% if lang == "fr" %}
        <a class="selectable {{c}}" data-type="media"  >TLP dans les médias</a>
        {% else %}
          <a class="selectable {{c}}" data-type="media"  >TLP in the media</a>
        {% endif %}
      </div>
  
  
<div class="columns medium-12 small-11 doc type">

       {% if lang == "fr" %}
        {% set arr = {
        rapports : "Rapports de recherche",
        admin : "Rapports d’activités et administratifs",
        digital : "Outils numériques",
        com: "Communiqués et tribunes"
        } %}
      {% else %}
        {% set arr = {
        rapports : "Research reports",
        admin : "Activity and administrative reports",
        digital : "Digital tools",
        com: "Press releases and tribunes",
      } %}
      {% endif %}
      
     

      <div class="row">
      {% for key,section in arr %}
        <div class="menu_selector column small-12" >
          <a class="selector" data-section="{{key}}" onclick="displaysection(this)">{{section}}</a>
        </div>
      {% endfor %}  
      {% for key,section in arr %}
        <div class="section column small-12" >
            <div data-type="{{key}}" class="row">
          {% for item in page.header.doc %}
              {% if item.docTag[0] == key %}
              <div class="elem column small-4">
                {% set id = item.url|split("=") %}

                <a style="background-image:url('{{ page.url~'/'~item.thumbnail|first.name }}'); background-color: grey;" href="{{ page.url~'/'~item.doc|first.name }}">
                    
                </a>
              </div>
              <div class="doc_desc column small-8">
                <div class="title">{{ item.title }}</div>
                <br>
                <p>{{ item.description }}</p>
              </div>
              {% endif %}
            
          {% endfor %}
          </div>
        </div>
      
      {% endfor %}
      </div>
    </div>
    </div>
  <div class="row doc_container">
    <div class="columns medium-12 small-11 images type">
      <div class="row">
      {% for elem in page.header.images %}
        {% if t == elem.title|hyphenize %}
          {% set class = "requested" %}
        {% else %}
          {% set class = "" %}
        {% endif %}
        <div class=" elem columns small-4 {{ class }}">
          <!-- <div class="overlay"></div> -->
          {% for img in elem.image_list %}
              <a style="background-image:url('{{page.url}}/{{img.name}}')" href="{{page.url}}/{{img.name}}" data-lightbox="{{ elem.title|hyphenize }}" data-title="{{ elem.title }} - {{ img.meta.caption }}">
                <div class="title">{{ elem.title }} ({{ elem.image_list|length }} photos)</div>
              </a>
          {% endfor %}

        </div>

      {% endfor %}
      </div>
    </div>
  </div>
</div>
    <div class="columns medium-12 small-11 video type">
      <div class="row">
      {% for elem in page.header.vid %}
        <div class="elem columns small-4">
          {% set id = elem.url|split("=") %}
          <a style="background-image:url(' https://img.youtube.com/vi/{{ id[1]}}/0.jpg')" href="{{ elem.url }}">
            <div class="title">{{ elem.title }}</div>
          </a>
        </div>
      {% endfor %}
      </div>
    </div>

    <div class="columns medium-12 small-11 pod type">
      <div class="row">
      {% for elem in page.header.pod %}
        <div class="elem pod_thumb columns large-4 small-10 small-offset-1">
          <mark>{{ elem.title }}</mark>
          <img src="{{page.url}}/{{elem.thumbnail|first.name}}" alt="">
          <br><br>
          {% for audio in elem.file %}
           <audio controls>
            <source src="{{page.url}}/{{audio.path}}" type="{{audio.type}}">
          Your browser does not support the audio element.
          </audio>
          {% endfor %}
          <p>
            {{ elem.desc }}
          </p>
        </div>
      {% endfor %}
      </div>
    </div>

    <div class="columns medium-12 small-11 newsletter type">
      <div class="row">
      {% for elem in page.header.nl %}
        <div class="columns small-12" style ="margin-bottom:1rem;">
        <a href="{{elem.url}}">
        <div class="row">
        <div class="newsletter_item small-12" >
          
          <h5>{{ elem.title }}</h5>
        
        </div>
        </div>
        </a>
        </div>
      {% endfor %}
      </div>
    </div>

    <div class="columns medium-12 small-11 media type">
      <div class="row">
      {% for elem in page.header.media %}
        <div class="columns small-12">
        <a href="{{elem.url}}">
        <div class="row">
        <div class="elem pod_thumb columns small-4">
          <img src="{{page.url}}/{{elem.thumbnail|first.name}}" alt="">
        </div>
        <div style="padding-left:1rem; margin:0;"class="elem small-8">
          
          <p><mark>{{ elem.title }}</mark><br></p>
          <p><b>{{elem.date|date("d-m-Y")}}</b></p>
          <p> {{ elem.desc }} </p>
          
        </div>
        </div>
        </a>
        </div>
      {% endfor %}
      </div>
    </div>

    
  </div>

</div>


<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });

    function displaysection(elem){
      let v = $(elem).data("section");
      if($(elem).hasClass("active")){
        $('.selector').removeClass("active");
         $(".section .row").show();
      }else{
        $('.selector').removeClass("active");
        $(elem).addClass("active");
        $(".section .row").hide();
        $(".section").find(`[data-type='${v}']`).show();
      }
     

    }

    $(".selectable").each(function(){
      if($(this).hasClass("select")){
        console.log(this);
        var e=$(this).data("type");
        $(".type").hide();
        $("."+e).show();
      }
      
    });

</script>



{% endblock %}