{% set title = article|os_trans("title") %}
{% set desc = article|os_trans("description") %}
{% set menu = 'articles' %}
{% if article.banner %}
{% set thumbnail = article.banner.thumbnail %}
{% set banner = asset(article.banner.file) %}
{% endif %}
{% extends 'Default/base.html.twig' %}

{% block titlebox %}
<div class='relative success fill flex row  middle {{desktop("w100 vt-40-in")}} {{mobile("")}}'>
    {% block title %}
    <h1 class='h2 upper lh-1 white'>{{title is defined ? title}}</h1>
    {% endblock title %}
    <i class="third"></i>
</div>
{% endblock titlebox %}

{% block content %}
<div class='{{desktop("gpadding vt-40-in")}} {{mobile("gpadding vt-30-in")}} '>
    <div class='{{desktop("flex row space top")}} {{mobile("")}}'>
        <div id='article' class='w100 {{desktop("")}} {{mobile("vt-20-in")}}'>
            <article  class='h6 article lh-4x black-alt text-justify {{desktop("")}}'>
            {{ article|os_trans("content")|raw }}
            </article>

            {% if article.biblio and article.biblio.files|length %}
            <h2 class='h4 top-40'>Documents joints</h2>
            <div class='flex row space wrap {{desktop("top-15")}}{{mobile("top-10")}}'>
                {% for o in article.biblio.files %}

                {% set doc = o %}
                {% set t = doc.target|split(".") %}
                {% set ext = t[t|length-1]|upper %}
                {% set readLink = path("file-read",{id:doc.id}) %}
                {% set downloadLink = path("file-download",{id:doc.id}) %}

                {% set action = null %}
                {% set type = null %}
                {% if doc.mimetype|lower == 'application/pdf' %}
                {% set action = 'os-read' %}
                {% set type = 'pdf' %}
                {% elseif 'image' in doc.mimetype|lower %}
                {% set action = 'os-image' %}
                {% set type = 'image' %}
                {% elseif 'video' in doc.mimetype|lower %}
                {% set action = 'os-video' %}
                {% set type = 'video' %}
                {% elseif 'doc' in doc.mimetype|lower %}
                {% set type = 'word' %}
                {% elseif 'xls' in doc.mimetype|lower or 'xlxs' in doc.mimetype|lower or 'csv' in doc.mimetype|lower  %}
                {% set type = 'excel' %}
                {% endif %}

                <div class='doc flex row top {{desktop("half-20")}} relative bg-gray bottom-20 hz-25-in vt-20-in hoverflow border-left border-warning border-solid border-5x {{desktop("")}} {{mobile("")}}'>
                    {% set doc = o %}
                    <span class="">
                        <i class="fa fa-file{{type ? "-"~type : ""}} success fa-3x"></i>
                    </span>
                    <div class='text-left flex col space relative left-20 right-40-in'>
                        <h3 class='h6 medium black p text-left nomargin lh-1x'>{{doc.name ? doc.name : doc.source}}</h3>
                        <div class="flex col middle space top-10">
                            <div class='black-alt text-left p-alt'>
                                <span class=''>{{doc.formatSize}}</span> |
                                <span class=''>{{doc.reading|number_format}} lect.</span> |
                                <span>{{doc.downloads|number_format}} téléch.</span>
                            </div>
                            <div class='flex row middle p upper medium top-20 nowrap'>
                                <i class="w100 top-2-in bg-gray right-40"></i>
                                <span class='{{action}} success' data-url="{{url('file-read',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}">Lire</span>
                                <a class='left-30 warning' href="{{path('file-download',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}" target='_blank' download>Télécharger</a>
                            </div>
                        </div>
                    </div>
                    <i class="triangle gradient-bannerm bg-white"></i>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% if article.youtube %}
            <h2 class='h4 top-40'>Suivez la vidéo</h2>
            <div class='bg-gray w100 top-25'>
                <iframe class='block block-center w100 youtube-frame' src='{{article.youtube|youtubeId|youtubeEmbed}}' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
            </div>
            {% endif %}

            {% if article.album and article.album.pictures|length %}
            <h2 class='h4 top-40'>{{article.album.title ? article.album.title : "Album photos"}}</h2>
            <div class="hoverflow slide-box msquare relative top-15">
                <figure class="os-slider bg-gray fill nohover relative overflow-scroll" tabindex="1">
                    <div class="fill min-w100 flex row">
                        {% for o in article.album.pictures %}
                        <div class='os-slider-child fill min-w100 relative'>
                            <img src='{{asset(o)}}' class='contain'>
                        </div>
                        {% endfor %}
                    </div>
                </figure>
                <span class="os-slider-prev radius-50 h100 padding-30 absolute top left pointer" data-target="#article .os-slider">
                    <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-left h1 white text-shadow"></i></span>
                </span>
                <span class="os-slider-next radius-50 h100 padding-30 absolute top right pointer"  data-target="#article .os-slider">
                    <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-right h1 white text-shadow"></i></span>
                </span>
            </div>
            {% endif %}

            {% if article.flickr %}
            <h2 class='h4 top-40'>Album photos</h2>
            <div class='bg-white w100'>
                <iframe class='block-center w100 flickr-frame' src='{{article.flickr|replace({"albums":"sets"})}}/player' scrolling='no' align='middle' frameborder='0'></iframe>
            </div>
            {% endif %}
        </div>
        <aside class="bg-white shadow-alt {{desktop('third-80 left-80 vt-20-in hz-20-in')}} {{mobile('vt-20-in hz-15-in')}}">
            <h2 class="h4 warning upper">Plus d'articles</h2>
            {% for o in list %}
            <div class="w100 {{desktop(' vt-20-in')}} {{mobile('vt-15')}}">
                <a class="w100 flex row top" href="{{path('article',{id:o.id,slug:o.slug})}}">
                    <img src="{{asset(o.banner ? o.banner.thumbnail : 'images/logo.svg')}}" class="block third {{desktop(o.banner ? '' : 'hz-25-in')}}">
                    <div class="flex col {{desktop('left-15')}} {{mobile('left-10')}}">
                        <h3 class="p-alt regular">{{o.title}}</h3>
                    </div>

                </a>
            </div>
            {% endfor %}
        </aside>
	</div>
</div>
{% endblock %}