{% macro article(o,alt = false) %}
<article class="relative news relative hoverflow anim-scroll anim-from-bottom transition-4s {{desktop('third-30 vt-40')}} {{mobile('w100 vt-20')}}">
    <figure class="relative w100 hoverflow shadow bg-white {{desktop("")}} {{mobile("msquare")}}">
        <img class="cover" src="{{asset(o.banner ? o.banner : 'images/background.jpg')}}" alt="{{o.title}}" loading="lazy">
    </figure>
    <div class="absolute fill top left gradient-article {{desktop('hz-50-in vt-50-in')}} {{mobile('padding-20')}}">
        <div class="fill flex col left space">
            <i></i>
            <div class="flex col left space white">
                {% if isDesktop() %}
                <div class="flex row middle">
                    <span class="bold upper">{{o.category.name}}</span>
                    <i class="padding-4 bg-white circle hz-10"></i>
                    <time class="upper medium">{{o.date|date("d.m.y")}}</time>
                </div>
                {% endif %}
                <h2 class="h5 lh-1x {{desktop('vt-20-in')}} {{mobile('vt-10-in')}}">
                    <a href='{{path("article",{id:o.id, slug:o.slug})}}'>{{o|os_trans('title')}}</a>
                </h2>
                <a class='bg-white upper bold success {{desktop('top-40 vt-15-in hz-20-in radius-5')}} {{mobile('radius-3 top-8 vt-7-in hz-15-in')}}'
                    href='{{path("article",{id:o.id, slug:o.slug})}}'>
                    Lire l'article
                </a>
            </div>
        </div>
    </div>
</article>
{% endmacro %}

{% macro video(o, alt = false) %}
<article class="video flex col success text-center {{desktop('third-25 vt-40')}} {{mobile('w100 vt-15')}}">
    <figure class="relative w100 hoverflow mrect">
        <img class="cover block" src="{{asset(o.banner ? o.banner.thumbnail : o.youtube ? o.youtube|youtubeThumbnail : 'images/background.jpg')}}" alt="{{o.title}}" loading="lazy">
        <div class="absolute fill top left">
            <a class="relative fill flex col middle center hover scale-hover transition" href='{{path("video",{id:o.id})}}'>
                <span class='flex row middle center p-alt success upper semibold bg-white transparent-alt {{desktop('vt-10-in hz-30-in radius-30')}} {{mobile('vt-5-in hz-20-in radius-15')}}'>Voir la vidéo</span>
            </a>
        </div>
    </figure>
    <h2 class="p-alt semibold {{desktop('vt-30-in')}} {{mobile('vt-15-in')}}">{{o.title}}</h2>
</article>
{% endmacro %}

{% macro doc(o, alt = false) %}
{% set doc = o.document %}
{% 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 %}
{% set alt = isMobile() ? false : alt %}
<article class="doc flex row middle bg-gray relative {{desktop(''~(alt ? 'half-60 vt-40 vt-40-in hz-60-in' : 'half-30 vt-30 vt-30-in'))}} {{mobile('vt-20 vt-15-in w100 hz-20-in')}}">

    {% if isDesktop() %}
        {% if o.cover %}
        <figure class="hoverflow relative {{desktop('quarter padding-20 hz-30')}} {{mobile("quarter")}}" loading="lazy">
            <img class="block w100 os-read" src="{{asset(o.cover.thumbnail)}}"  data-target='{{readLink}}'/>
        </figure>
        {% elseif not alt %}
        <figure class="hoverflow relative {{desktop('quarter padding-20 hz-30')}} {{mobile("quarter")}}" loading="lazy">
            <img class="block w100 os-read" src="{{asset(os_param('logo'))}}"  data-target='{{readLink}}'/>
        </figure>
        {% endif %}
    {% endif %}

    <div class="relative flex col space {{desktop(alt ? 'top-30-in' : ' right-40-in')}} {{mobile( alt ? 'top-10-in')}}">

        <h2 class="h5 success {{desktop('')}}">{{o|os_trans('title')}}</h2>
        {% if o.category and not alt %}
        <h3 class="p-alt medium warning">{{o.category|os_trans('label')}}</h3>
        {% endif %}

        <div class="relative flex col {{desktop('top-20')}} {{mobile('top-10')}}">
            <div class='flex col middle border-top border-solid border-gray border-1x {{desktop("vt-10-in")}} {{mobile("vt-7-in")}}'>
                <div class='flex row middle {{desktop("")}} {{mobile("")}}'>
                    <span class="p-alt {{mobile('')}}">
                        <span>{{ext}} - {{doc.formatSize}} - </span>
                        <span>{{doc.reading|number_format}} lectures - {{doc.downloads|number_format}} téléch.</span>
                    </span>
                </div>
            </div>
            <div class="relative flex row upper {{desktop('top-10')}} {{mobile('top-10')}}">
                {% set dClass = "vt-10-in hz-30-in" %}
                {% set mClass = "vt-10-in hz-20-in" %}

                {% if action %}
                <span class="{{action}} flex row middle border border-success {{desktop(' border-3x radius-10 vt-15-in hz-20-in top-20')}}{{mobile('border-1x radius-5 vt-10-in hz-10-in')}}" data-target='{{readLink}}'>
                    <span class="upper bold">Lire</span>
                </span>
                {% endif %}
                <a class="flex row middle bg-success white {{desktop('radius-10 vt-15-in hz-20-in top-20 left-30')}}{{mobile('radius-5 vt-10-in hz-10-in left-10')}}" href='{{path("file-download",{id:doc.id})}}' target='_blank' download>
                    <span class="upper bold">Télécharger</span>
                </a>
            </div>
        </div>
    </div>
</article>
{% endmacro %}

{% macro page(o) %}
<div class='bg-white shadow-alt-3 vt-20 vt-20-in hz-20-in border border-gray-alt border-notop border-noleft border-noright {{desktop("half-40")}}'>
	<h4 class='h5'>{{o.title}}</h4>
	<p class='bottom-10'>{{o.description}}</p>
	<a href='{{path("page",{slug:o.slug})}}' class='success bold upper scale-hover transition'>En savoir plus</a>
</div>
{% endmacro %}

{% macro member(o) %}
<aside class="shadow-alt-3 flex col  {{desktop('third-15 bottom-60')}}{{mobile('w100 bottom-20')}}">
    <figure class="relative hoverflow scale-hover-img transition {{desktop('')}}{{mobile('w100 msquare')}}" style="{{desktop('min-height: 22vw')}}">
        <img src="{{asset(o.picture.file)}}" class="cover transition" loading="lazy" alt="{{o.fName~' '~o.lName}}">
    </figure>
    <div class="h100 flex col middle w100 {{desktop('hz-30-in vt-30-in')}}{{mobile('hz-20-in vt-10-in')}}">
        <div class="w100 text-center">
            <h2 class="h5 success">{{o.fName}} {{o.lName}}</h2>
            <span class="upper">{{o|os_trans("profession")}}</span>
        </div>
    </div>
</aside>
{% endmacro %}