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

{% block title %}Réservations pour {{ event.name }}{% endblock %}

{% block content %}

        
          {{ component('Modal')}}
        
<div class="columns">
  <div class="column is-one-third">
<div class="card" {{ stimulus_controller('dropdown')}} >
  <div class="card-image">
    <figure class="image is-3by1">
      {% if event.picture %}
        <img src="/images/events/{{ event.picture }}" />
      {% else %}
        <img src="/images/events/placeholder.webp" />
      {% endif %}
    </figure>
  </div>

  <div class="card-footer">
    <div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
      <button>
        <span><strong>{{ event.name }}</strong></span>        
      </button>
      <span class="icon is-small">
        <twig:ux:icon name="bi:chevron-down" />&nbsp;
      </span>
      <div data-dropdown-target="menu" class="dropdown-menu">
        <div class="dropdown-content">
          {% for evt in events %}
          {% if event.id != evt.id %}
          <a href="{{ path('app_main_booking', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
          {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

</div>

</div>
<div class="column">
  <div class="hero is-small">
    <div class="hero-body">
      <h2 class="title is-2">{{ event.name }}</h2>
      <p class="subtitle is-4">du {{ event.startOn|date('d/m/y H:i', app_timezone) }} au {{ event.endOn|date('d/m/y H:i', app_timezone)}}</p>
      <article>
        <p>{{ event.description }}</p>
      </article>
    </div>
  </div>
</div>
</div>

{% if not event.isHiddenPlanning %}
<section>
  <hr />
  <div id="planning">
    {{ component('Planning', {event: event,pathFullSlot: 'app_party_view'}) }}
  </div>
</section>
{% endif %}

{% endblock %}