{% 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 parties ! 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 class="is-active"><a>Informations</a></li>
		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'pictures'}) }}">Vignettes</a></li>
 		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'planning'}) }}">Planning</a></li>
	</ul>
</div>
{%  endif %}

	{% set authors = [] %}
	{% set gamemasters = event.gamemastersAssigned %}
	{% set games = event.gameAssigned %}
	{% for party in event.parties %}
	{% if party.gamemasterIsAuthor and (party.gamemaster not in authors) %}
    {% set authors = authors|merge([party.gamemaster]) %}
    
	{% endif %}
	 
	{% endfor %}

<section class="block">
{% if authors|length > 0 %}
<div class="content">
	<h2 class="title">Les auteur(rice)s présent(e)s</h2>
	


  {% for gamemaster in authors %}
<article class="media">
  <figure class="media-left">
    <p class="image is-128x128">
        {% if gamemaster.picture %}
        <img class="is-rounded" src="/images/gamemasters/{{ gamemaster.picture }}" />
        {% else %}
        <twig:ux:icon name="bi:person-fill"/>
        {% endif %}
    </p>
  </figure>
  <div class="media-content">
    <div class="content">
    <h3>{{  gamemaster.preferedName }}</h3>
      <p>
       {{ gamemaster.description }}
      </p>
      {% if gamemaster.isAuthor %}
      <p>
        <em>Je suis auteur(rice) des jeux suivants : </em><br/>
       {{ gamemaster.authorOfGames|map(game => game.name)|join(', ') }}

      </p>
      {% endif %}

    </div>
  </div>
</article>
		{% endfor %}
</div>
{% endif %}

<div class="content">
	<h2 class="title">Les meneur(euse)s de jeu présent(e)s</h2>
	<p><em>Cliquez sur la vignette pour lire sa biographie et découvrir les jeux qui vous seront proposés.</em></p>
	<div class="fixed-grid has-6-cols-fullhd has-4-cols-widescreen has-4-cols-desktop has-4-cols-tablet has-2-cols-mobile">
	     <div class="grid is-col-min-12">
        {% for gamemaster in gamemasters %}

        <div class="cell">
        <a href="{{ path('app_gamemaster_public_profile', {id: gamemaster.id}) }}" class="open-modal">
          <div class="box">
          <article class="media">
            <figure class="media-left">
              <p class="image is-64x64">
                {% if gamemaster.picture %}
                <img src="/images/gamemasters/{{ gamemaster.picture }}"  />
                {% else %}
                <twig:ux:icon name="bi:person-fill"/>
                {% endif %}
              </p>
            </figure>
            <div class="media-content">
              <div class="content">
                <p>
                  <strong>{{ gamemaster.preferedName }}</strong>
                </p>
              </div>
            </div>
          </article>
          </div>
          </a>
        </div>
        {% endfor %}
      </div>
      </div>
</div>

<div class="content">
	<h2 class="title">Les jeux proposés</h2>
	<p><em>Cliquez sur la vignette pour consulter la description complète du jeu.</em></p>
	<div class="fixed-grid has-6-cols-fullhd has-4-cols-widescreen has-4-cols-desktop has-4-cols-tablet has-2-cols-mobile">
        <div class="grid is-col-min-12">
          {% for game in games %}

          <div class="cell" >
          <a href="{{ path('app_game_public', {id: game.id}) }}" class="open-modal">
            
            <div class="card">
              <div class="card-image">
              <figure class="image is-3by1">

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

              </figure>
              </div>
              <div class="card-content">
                <div class="content">
                  <p>
                    <strong>{{ game.name }}</strong>
               
                  </p>
                </div>
              </div>
            </div>
            </a>
          </div>
          {% endfor %}
        </div>
      </div>
</div>

</section>


{% endblock %}