{% extends 'base.html.twig' %}

{% block title %}{{ video.title }} — {{ site.schoolName }}{% endblock %}
{% block meta_description %}{{ video.excerpt ?: video.title }}{% endblock %}
{% block og_image %}{% if video.thumbnail %}{{ video.thumbnail }}{% else %}{{ parent() }}{% endif %}{% endblock %}

{% block body %}
<section class="page-hero">
    <div class="wrap">
        <p class="eyebrow">{{ video.platformLabel }} · {{ video.publishedAt|date('d/m/Y') }}</p>
        <h1>{{ video.title }}</h1>
        {% if video.excerpt %}<p class="lead">{{ video.excerpt }}</p>{% endif %}
    </div>
</section>
<article class="wrap video-watch">
    <div class="video-embed{% if video.isInstagram %} video-embed--instagram{% endif %}">
        <iframe
            title="{{ video.title }}"
            src="{{ video.embedUrl }}"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen
            loading="lazy"
        ></iframe>
    </div>
    <p>
        <a class="btn btn-gold" href="{{ video.url }}" target="_blank" rel="noopener">
            <i class="{{ video.platformIcon }}"></i>
            Ver no {{ video.platformLabel }}
        </a>
        <a class="btn btn-ghost" href="{{ path('app_videos') }}">Todos os vídeos</a>
    </p>
    {% if related %}
        <section class="video-related">
            <h2>Mais vídeos</h2>
            <div class="video-grid">
                {% for item in related %}
                    {% include '_video_card.html.twig' with { video: item } %}
                {% endfor %}
            </div>
        </section>
    {% endif %}
</article>
{% endblock %}