{% extends "page_header.html.twig" %}
{% block page_container %}
<div class="back-trading-video back-trading-video2 video-list-container">
<div class="container">
<ul class="row">
{% for content in collection %}
<li class="col-lg-4">
<div class="image-area">
<a href="#">
<img src="{{ content.thumbnail|imagine_filter('thumbnail_500_400') }}" alt="{{ content.title }}">
</a>
<a href="{{ path('video_show', {'slug':content.slug}) }}" class="back-video"><i class="fa-solid fa-play"></i></a>
<div class="back-btm-content">
<h3><a href="{{ path('video_show', {'slug':content.slug}) }}">
{{ content.title |u.truncate('50') }}
</a></h3>
<ul>
<li class="back-author">
<span>
<img src="{{ content.user.thumbnail|imagine_filter('thumbnail_small')}}" alt="{{ content.user.firstname ~' '~ content.user.lastname}}">
</span>
<a href="#">{{ content.user.firstname}}</a>
</li>
<li class="back-date"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</span>{{ content.datePublished|date("j F Y")}}
</li>
</ul>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}