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

{% block page_content %}
        <div style="display: flex; flex-wrap: nowrap; flex-direction: column; max-width: 640px; margin: 0 auto; width: 100%; border-radius: 5px; border: 1px solid #cdcdcd; box-shadow: 1px 1px 5px #cdcdcd">
            <h1 style="margin: 2rem; font-weight: bold; color: #FC971F; line-height: normal">{{ video.title }}</h1>
            <br>
            <video controls preload="metadata" oncontextmenu="return false;" style="width: 100%; aspect-ratio: 16/9;">
                <source src="{{ path('app_video_stream', {'id': video.id}) }}" type="video/mp4">
                Votre navigateur ne supporte pas la lecture de vidéos HTML5.
            </video>
            <div style="display: flex; justify-content: space-between; padding: 1rem">
                <div>
                    <p>Mis en ligne le : <span style="color: #8c8c8c">{{ video.createdAt|date('d/m/Y à H:i') }}</span></p>
                    {% if video.category %}
                        <p style="font-weight: bold">Catégorie : <span style="font-weight: normal">{{ video.category }}</span></p>
                    {% endif %}
                    {% if video.description %}
                        <span style="font-weight: bold">Description :</span>
                        <p style="margin: 1rem">{{ video.description }}</p>
                    {% endif %}
                </div>
                {% if is_granted('ROLE_ADMIN') %}
                    <div style="display: flex; flex-direction: column; gap: .5rem">
                        <a href="{{ path('app_video_edit', {id: video.id}) }}" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; width: 100%; height: fit-content">
                        <span style="display: flex; align-items: center; text-align: center; gap: 1rem">
                            Modifier la vidéo
                            <i class="fas fa-edit"></i>
                        </span>
                        </a>
                        <a href="{{ path('app_video_delete', {"id": video.id}) }}" style="background-color: #ff2929; color: white; padding: .5rem; border-radius: 3px; width: fit-content; height: fit-content">
                        <span style="display: flex; align-items: center; text-align: center">
                            Supprimer la vidéo
                            <i class="fas fa-trash"></i>
                        </span>
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
        <a href="{{ path('app_video') }}" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px;border: none; width: fit-content; margin: 2rem; display: block">< Retour</a>
{% endblock %}