{% 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 event-selector" {{ 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>
          {% if events|length > 1 %}
      		<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, view: 'pictures'})}}" 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>
          {% endif %}
    		</div>
  		</div>
		</div>
	</div>
	
	<div class="column">
  	<div class="hero is-small">
    	<div class="hero-body">
      	<h2 class="title is-2">{{ event.name }}{% if event.moreLink %}<a href="{{ event.moreLink }}" target="_blank" title="En savoir plus sur le site de l'événement.">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:link-45deg"/></small></a>{% endif %}<a href="{{ app_url|replace({'https://':'webcal://'}) }}{{ path('app_main_ics', {id: event.id}) }}" target="_blank" title="Ajouter à mon agenda">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:calendar-plus"/></small></a></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 event.isEveryoneCanAskForGame %}
<div class="block is-clearfix">
	<div class="message is-info">
	  <div class="message-body">
    	<p class="block">Cet événement vous propose de demander votre partie ! Choissez un jeu, choissez un(e) meneur(euse) de jeu et nous planifierons, si possible votre partie.</p> 
    	{%  if is_granted('ROLE_USER') %}
    	<p class="block"><a href="{{ path('app_party_request', {id: event.id}) }}" class="button is-info open-modal">Demander une partie</a></p>
    	{% else %}
    	<p>Vous devez disposer d'un compte utilisateur pour réaliser une demande. <a href="{{ app_url }}login">Connectez-vous ou créez un compte.</a></p>
    	{% endif %}
    </div>
	</div>
</div>
{% endif %}

{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
<div class="tabs is-boxed">
	<ul>
		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'info'}) }}">Informations</a></li>
		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'pictures'}) }}">Vignettes</a></li>
 		<li class="is-active"><a>Planning</a></li>
	</ul>
</div>
{%  endif %}

{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
<section class="container">
  <div id="planning">
    {{ component('Planning', {event: event,pathFullSlot: 'app_participation'}) }}
  </div>
</section>
{% else %}
<div class="block message is-danger">
	<div class="message-header">
	<p>Accès réservé</p>
	</div>
	<div class="message-body">
	<p>L'affichage du planning est réservé aux gestionnaires de l'événement.</p>
	</div>
</div>
{% endif %}

{% endblock %}