{% extends 'base.html.twig' %}
{% block title %}#Blissisthenewevent{% endblock %}
{% block body %}
    <style>
        .entete-event{min-height: 100px;background-color: #FFF;z-index: 5;margin: -15% 10% 0;width: -webkit-fill-available;}
        #details{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 50px;text-align: center;}
        #details svg{color:#5A2F7F;}
        #details p:first-child{margin-left: 6%;}
        #details p:last-child{margin-right: 6%;}
        #details .calendar {color: #f2bb05;}
        #details .time {color: #6fb6ae;}
        #details .location {color: hotpink;}
        #details .people {color: #e5625e;}
        .container h2 ~ :last-child::after {border-bottom: none !important;}
    </style>
        <div class="row">
            <p></p>
            <p></p>
            <h2>Bliss Event</h2>
            <div id="carouselExampleFade" class="carousel slide carousel-fade h-75" data-bs-ride="carousel">
                <div class="carousel-inner align-content-lg-center">
                    {% set active = 'active' %}
                    {% for image in images %}
                    <div class="carousel-item {{ active }}">
                        <img src="{{ image.link }}" class="d-block w-100" alt="{{ image.libelle }}">
                    </div>
                    {% set active = '' %}
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

            <div class="entete-event">
                <div class="">
                    <p><h2 class="text-uppercase">{{ event.title }}</h2></p>
                </div>
                <div class="">
                    <p class="text-justify">{{ event.description }}</p>
                </div>
                <div class="row" id="details">
                    {% if event.date is not empty %}
                    <p class="calendar col"><strong>{{ event.date }}</strong><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-calendar-event" viewBox="0 0 16 16">
  <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg></p>
                    {% endif %}
                    {% if event.place is not empty %}
                    <p class="location col"><strong>{{ event.place }}</strong><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
</svg></p>
                    {% endif %}
                    {% if event.duration is not empty %}
                    <p class="time col"><strong>{{ event.duration }}</strong><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
  <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
</svg></p>
                    {% endif %}
                    {% if event.nbpax is not empty %}
                    <p class="people col"><strong>{{ event.nbpax }} participants</strong><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
      <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
      <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
      <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
    </svg></p>
                    {% endif %}
                </div>
                <div style="padding:56.25% 0 0 0;position:relative;margin-top:6%;">
                    <iframe src="https://player.vimeo.com/video/{{ event.vimeoid }}?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>
            </div>
        </div>
        
{% endblock %}