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

{% block title %}Mes replay {% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Vos replays"}) }}

    <!-- Class Start -->
    <div class="container-fluid pt-5">
        <div class="container">
            <div class="text-center pb-2">
                <p class="section-title px-5">
                    <span class="px-2">Les ateliers</span>
                </p>
                <h1 class="mb-4">Vos replays</h1>
            </div>

            <div class="row">
                {% if reservations|length > 0 %}

                    {% for organisator in reservations %}

                        {% if organisator.event.eventReplays|length > 0 %}

                            {% for contents in organisator.event.eventReplays %}
                                <div class="col-lg-6 mb-5">
                                    
                                        {% if contents.content.principal == 1 and contents.content.type.id == 11 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ contents.content.image }}" data-setup="{}">
                                                <source src="{{ contents.content.file }}" type="video/mp4" />
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                            <div style="background-color:#ffffff;padding:3%" class="text-center">
                                                <br />
                                                <h4 class="mb-4" style="color:black">{{ contents.content.name }}</h4>
                                            </div>
                                        {% endif %}
        
                                        {% if contents.content.principal == 1 and contents.content.type.id == 10 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ contents.content.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ contents.content.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                            <div style="background-color:#ffffff;padding:3%" class="text-center">
                                                <br />
                                                <h4 class="mb-4" style="color:black">{{ contents.content.name }}</h4>
                                            </div>
                                        {% endif %}
                                </div>
                            {% endfor %}    

                        {% endif %}

                    {% endfor %}

                {% else %}
                    <div class="container-fluid text-center pb-2" style="padding:3%">
                        <p>
                            Pas encore disponible.
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- Class End -->

    <div class="d-flex justify-content-center">
        {% do reservations.setPageRange(2)  %}
        {{ knp_pagination_render(reservations, 'base/pagination.html.twig') }}
    </div>

{% endblock %}