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

{% block title %}Bienvenue !{% endblock %}

{% block content %}

<div class="fixed-grid has-3-cols-fullhd has-3-cols-widescreen has-2-cols-desktop has-2-cols-tablet has-1-cols-mobile">
        <div class="grid is-col-min-12">
          {% for event in events %}

          <div class="cell">
            
            <div class="card">
              <div class="card-image">
                <a href="{{ path('app_main_booking', {id: event.id, 'view': 'pictures'}) }}" title="Réserver une place">
                  <figure class="image is-3by1">

                      {% if event.picture %}
                      <img src="/images/events/{{ event.picture }}"  />
                      {% else %}
                      <img src="/images/events/placeholder.webp"  />
                      {% endif %}

                  </figure>
               </a>
              </div>
              <div class="card-content">
                <div class="content text-limit-height">
                  <p>
                    <strong class="title is-4">{{ event.name }}</strong>{% if event.isPrivate %}&nbsp;<span class="tag">Privé</span>{% endif %}
                    <br/>
                    <span class="subtitle is-6"><span class="icon is-16x16"><twig:ux:icon name="bi:clock" />&nbsp;</span>du {{ event.startOn|date('d/m/y', app_timezone) }} à {{ event.startOn|date('H:i', app_timezone) }} au {{ event.endOn|date('d/m/y', app_timezone) }} à {{ event.endOn|date('H:i', app_timezone) }}</span>

                    
                    
                  </p>
                </div>


              </div>
              <div class="card-footer">
                <a class="card-footer-item" href="{{ path('app_main_booking', {id: event.id, 'view': 'pictures'}) }}">Réserver une place</a>
                {% if is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
                <a class="card-footer-item" href="{{ path('app_manage_planning', {id: event.id}) }}">Gérer</a>
                {% endif %} 
              </div>
            </div>
            
          </div>
          {% endfor %}
        </div>
      </div>

{% endblock %}