{% extends 'base.html.twig' %}
{% block title %}#Blissisthenewevent{% endblock %}
{% block body %}
    <style>
        .card a{color: #FFF; text-decoration: none;}
        .container .vids  ~ :last-child::after {border-bottom: none !important;}
        .vids .card-img-overlay{top: auto !important;background-color: #FFF;opacity: 0.8;color: #5a2f7f;}
    </style>
        <div class="">
            <p></p>
            <p></p>
            <h2>Bliss TV</h2>

            <div class="row row-cols-1 row-cols-lg-3 g-2 g-lg-1">
                {% if vids is not empty %} 
                    {% for vid in vids %}
                <div class="col" style="margin-bottom: 10px;">
                    <div class="card">
                        <a href="javascript:void(0)" id="{{ vid.link }}" data-bs-toggle="modal" data-bs-target="#modalVideo" class="vids">
                            {% if vid.image is not null %}
                            <img src="{{ vid.image }}" class="card-img" alt="{{ vid.name }}">
                            {% if vid.name is not empty %}
                            <div class="card-img-overlay">
                                <h5 class="card-title text-capitalize text-center">{{ vid.name }}</h5>
    {#                            <p class="card-text">Last updated </p>#}
{#                                {{ dump(vid ) }}#}
                            </div>
                            {% endif %}
                            {% else %}
                            <div style="padding:56.25% 0 0 0;position:relative;">
                                <iframe src="https://player.vimeo.com/video/{{ vid.link }}?h=145c17473d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" 
                                        allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="...">
                                </iframe>
                            </div>
                            {% endif %}
                        </a>
                    </div>
                </div>
                    {% endfor %}
                    <script>
                        $(document).ready(function(){
                            $('.vids').on('mouseover', function(){
{#                                $(this).children().fadeIn(10);#}
                            });
                            $('.card-img-overlay').on('mouseout', function(){
{#                                $('.card-img-overlay').children().fadeOut(15);#}
                            });
                            $('.card a').on('click', function(){
                                var id = $(this).attr('id');
                                $('.modal-content iframe').attr('src', 'https://player.vimeo.com/video/'+id+'?h=145c17473d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479');
{#                                $.ajax({
                                    type: "GET",
                                    url: 'https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/'+id,
                                    success: function(data) {
                                    }
                                });#}
                            });
                        });
                    </script>
                <div class="modal fade" id="modalVideo" tabindex="-1" aria-labelledby="modalVideoLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content">
                            <div style="padding:56.25% 0 0 0;position:relative;">
                                <iframe src="" frameborder="0" 
                                        allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="...">
                                </iframe>
                            </div><script src="https://player.vimeo.com/api/player.js"></script>
                        </div>
                    </div>
                </div>
                {% else %}
                <div>
                    Pas de vidéo à afficher !!!
                </div>
                {% endif %}
            </div>
        </div>
{#                                <div style="padding:56.25% 0 0 0;position:relative;">
                                    <iframe src="https://player.vimeo.com/video/{{ vid.link }}?h=87275e41a5&title=0&byline=0&portrait=0&speed=0&badge=0&autopause=0&player_id=0&app_id=58479/embed" 
                                            allow="autoplay; fullscreen; picture-in-picture" allowfullscreen frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
                                </div>#}
        
{% endblock %}