<div class="row content-jus">
{% for product in products %}
<div class="col-lg-2 col-md-3 col-sm-6 col-xl-2">
<article class="product" productid="{{ product.Id }}">
<div class="thumb-pad2 maxheight1">
<div class="box_inner">
<div class="thumbnail">
<figure>
{% if product.Category.Id == 69 %}
<a target="_blank" href="https://www.youscribe.com/BookReader/AudioReader?productId={{ product.Id }}&ysauth={{ tokenUser }}">
<img class="img-livre img-thumbnail" src="{{ product.ThumbnailUrls[0].Url }}"></a>
{% else %}
<a target="_blank" href="https://www.youscribe.com/BookReader/Index/{{ product.Id }}?ysauth={{ tokenUser }}">
<img class="img-livre img-thumbnail" src="{{ product.ThumbnailUrls[0].Url }}"></a>
{% endif %}
</figure>
<div class="c-product-infos c-product-infos-product">
{% if product.Category.Id == 69 %}
<a target="_blank" class="c-product-infos-title" href="https://www.youscribe.com/BookReader/AudioReader?productId={{ product.Id }}&ysauth={{ tokenUser }}">
{{ product.Title }}
</a>
{% else %}
<a target="_blank" class="c-product-infos-title" href="https://www.youscribe.com/BookReader/Index/{{ product.Id }}?ysauth={{ tokenUser }}">
{{ product.Title }}
</a>
{% endif %}
<p class="title">
{{ product.OwnerDisplayableUserName is defined ? product.OwnerDisplayableUserName : '' }}
</p>
</div>
{% if product.Category.Id == 69 %}
<div class="middle">
<a target="_blank" class="btn btn-info btn-shadow font-weight-bold waves-effect waves-themed text" href="https://www.youscribe.com/BookReader/AudioReader?productId={{ product.Id }}&ysauth={{ tokenUser }}">
Lire
</a>
</div>
<div class="middle-preview d-none d-sm-block">
<a href="https://www.youscribe.com/BookReader/AudioReader?productId={{ product.Id }}&ysauth={{ tokenUser }}" target="_blank" class="btn btn-default btn-shadow font-weight-bold waves-effect waves-themed no-click text" href="#" data-toggle="popover" data-html="true" data-offset="0,5" data-trigger="hover" data-placement="right" title="" data-content='{% include 'default/preview.html.twig' %}'>
Preview
</a>
</div>
{% else %}
<div class="middle">
<a target="_blank" class="btn btn-info btn-shadow font-weight-bold waves-effect waves-themed text" href="https://www.youscribe.com/BookReader/Index/{{ product.Id }}?ysauth={{ tokenUser }}">
Lire
</a>
</div>
<div class="middle-preview d-none d-sm-block">
<a href="https://www.youscribe.com/BookReader/Index/{{ product.Id }}?ysauth={{ tokenUser }}" target="_blank" class="btn btn-default btn-shadow font-weight-bold waves-effect waves-themed no-click text" href="#" data-toggle="popover" data-html="true" data-offset="0,5" data-trigger="hover" data-placement="right" title="" data-content='{% include 'default/preview.html.twig' %}'>
Preview
</a>
</div>
{% endif %}
</div>
</div>
</div>
</article>
</div>
{% endfor %}
<div class="offset-md-4 col-lg-12 col-md-12 col-sm-12 col-xl-12">
{{ knp_pagination_render(products , '@KnpPaginator/Pagination/twitter_bootstrap_v4_pagination.html.twig') }}
</div>
</div>