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

{% block title %}Accueil{% endblock %}

{% block body %}
<div id="wrapper">

    <section class="accueil">
        <img class="logoYoutube" src="{{ asset('img/youtube.png') }}" alt="Logo Youtube">
        <img class="route" src="{{ asset('img/route1.jpg') }}" alt="Photo d'une route">
    </section>

    {% for label, messages in app.flashes %}
        {% for message in messages %}

        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div class="alert-message">
                <strong>{{ message }}</strong>
            </div>
        </div>

        {% endfor %}
    {% endfor %}


    <div class="main">
        <figure>
            <figcaption>
                <a href="https://youtube.com/@benetvalsurlesroutes?si=tloF4kPLmjdTxkfc"
                    title="Accéder à la chaine Youtube">
                    <h1>Ben et Val sur les routes</h1>
                </a>



            </figcaption>
            <img class="benEtVal" src="{{ asset('img/benEtVal.jpg') }}" alt="Benjamin et Valérie">
        </figure>
        <nav>
            {% if app.user %}
            <div class="connexion">
                <a href="{{ path ('app_logout') }}">
                    <img class="Bouton" src="{{ asset('img/logout-box-line.svg') }}" title="Déconnexion"
                        alt="Icône Log Out">
                </a>
            </div>
            {% else %}
            <div class="connexion">
                <a href="{{ path ('app_login') }}">
                    <img class="Bouton" src="{{ asset('img/login-box-line.svg') }}" title="Connexion"
                        alt="Icône Log In">
                </a>
            </div>
            {% endif %}
        </nav>
    </div>

    {% if is_granted('ROLE_ADMIN') %}
    <div class="parametres">
        <a href="{{ path('new_youtube') }}">
            <img src="{{ asset('img/download-solid.svg') }}" class="Bouton" alt="Logo Télécharger"
                title="Ajouter des Vlogs">
        </a>
        <a href="{{ path('list_youtube') }}">
            <img src="{{ asset('img/gear-solid.svg') }}" class="Bouton" alt="Logo Engrenage"
                title="Afficher la liste des Vlogs">
        </a>
    </div>
    {% endif %}

    <section>

        {% if youtubes|length != 0 %}

        <div class="container">

            {% for youtube in youtubes %}

            <div class="col">
                <a href="{{ path('app_video', {'id': youtube.id }) }}">
                    <img src="{{ asset('uploads/images/'~ youtube.image) }}" class="card-img-top"
                        alt="Image miniature de la vidéo">
                </a>
            </div>

            {% endfor %}

        </div>

        {% else %}
        Prochainement !
        {% endif %}

    </section>
    
    <div class="compteur">
        <iframe height="80px" width="195px" frameborder="0"
        src=https://livecounts.io/embed/youtube-live-subscriber-counter/UCSnkZWjgUonOfe3EEd4d42g
        style="border: 0; width:195px; height:80px;">
        </iframe>
        <p>Abonnés</p>
    </div>
    <div class="link">
        <a href="https://www.benjaminlouis.eu/">Réalisé par Benjamin LOUIS</a>
    </div>

</div>
{% endblock %}