{% set title = video.title %}
{% set desc = video.description %}
{% set menu = 'articles' %}
{% set subtitle = 'Publications' %}
{% if video.banner %}
{% set thumbnail = video.banner.thumbnail %}
{% set banner = asset(video.banner.file) %}
{% elseif video.youtube %}
{% set thumbnail = video.youtube|youtubeThumbnail %}
{% set banner = video.youtube|youtubeThumbnail('h') %}
{% endif %}
{% extends 'Default/base.html.twig' %}

{% block banner %}
<div id='banner' class='htop-in bg-success relative gpadding {{desktop("")}} {{mobile("")}}'>
    <div class='relative flex col w100 {{desktop("top-40-in")}} {{mobile("vt-20-in")}}'>
        <div class='white {{desktop("gpadding top-40-in")}} {{mobile("")}}'>
            <h1 class='text-center'>{{title}}</h1>
            <div class="flex row center">
                <i class="border-left border-white border-1x border-solid {{desktop("vt-25-in")}} {{mobile("vt-10-in")}}"></i>
            </div>
        </div>
    </div>
</div>
{% endblock banner %}

{% block content %}
<div class='gpadding {{desktop("vt-40-in")}} {{mobile("vt-20-in")}} '>
    <div class='{{desktop("gpadding flex col space")}} {{mobile("")}}'>
		<div class='w100'>
			<div id='article' class='w100 radius-10 {{desktop("")}} {{mobile("")}}'>
				{% if video.description %}
				<p class='h4 black semibold {{desktop("adapt bottom-40")}} {{mobile("bottom-20")}}'>{{video.description|nl2br}}</p>
				{% endif %}

				{% if video.youtube %}
				<div class='w100'>
					<iframe class='w100 youtube-frame msquare shadow-alt bg-gray' src='{{video.youtube|replace({"youtu.be/":"youtube.com/watch?v="})|replace({"watch?v=":"embed/"})}}' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
				</div>
				{% endif %}

				{% if video.file %}
				<div class='w100'>
					<video class='w100 shadow-alt bg-gray {{desktop("radius-20")}} {{mobile("radius-10")}}' controls='' autoplay='' src='{{path("file-read",{id:video.file.id})}}' preload='auto'></video>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
{% endblock %}