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

{% block title %}{{ party.game.name }}{% endblock %}

{% block header %}
{% if party.getGame.getPicture %}
  <section class="modal-card-image">
    <figure class="image is-3by1">
      <img
        src="/images/games/{{ party.getGame.getPicture }}"
        alt="{{ party.getGame.getName }}"
      />
    </figure>
  </section>
{% endif %}
{% endblock %}

{% block content %}
  <div class="content">

  		<div class="block">
			<p class="has-text-centered">{{ party.getStartOn|date('d/m/Y \\d\\e H:i', app_timezone)}} à {{ party.getEndOn|date('H:i', app_timezone)}} • {{ party.getSlots.first.getSpace.getName }}</p>
  		</div>

	</div>

 <div class="tabs is-boxed" {{ stimulus_controller('bulma_tabs') }}>
   <ul>
     <li class="is-active" data-id="tab-1"><a>Le jeu</a></li>
     <li data-id="tab-2"><a>Le(a) MJ</a></li>
     {% if party.getDescription %}<li data-id="tab-3"><a>Le scénario</a></li>{% endif %}
     {% if party.getSeatsLeft > 0 %}{% if party.getEndOn > date() or is_granted('ROLE_MANAGER') %}<li data-id="tab-4"><a>S'incrire</a></li>{% endif %}{% endif %}
   </ul>
 </div>
 
 <div id="tabs-content">
    <div class="container" id="tab-1">
    	<div class="block">
    		<p>{{ party.getGame.getDescription }}</p>
      	</div>
		<div class="block">
			<div class="message is-info">
				<div class="message-header">
					<p>À propos du jeu</p>
				</div>
				<div class="message-body">
				<ul>
                    {% if party.gamemasterIsAuthor %}<li class="has-text-danger"><strong>Partie animée par son auteur(rice)</strong></li>{% endif %}
					<li><strong>Âge recommandé : </strong>{{ party.getGame.getAgeRecommendationLabel }}</li>
					<li><strong>Genres : </strong>{{ party.getGame.getGenre|map(g => g.genre)|join(', ') }}</li>
				</ul>
	  			</div>
  			</div>
  		</div>
    </div>

    <div class="container is-hidden" id="tab-2">
   		<article class="media">
          <figure class="media-left">
            <p class="image is-128x128">
                {% if party.getGamemaster.picture %}
                <img class="is-rounded" src="/images/gamemasters/{{ party.getGamemaster.picture }}" />
                {% else %}
                <twig:ux:icon name="bi:person-fill"/>
                {% endif %}
            </p>
          </figure>
          <div class="media-content">
            <div class="content">
            <h4>{{ party.getGamemaster.getPreferedName }}{% if party.gamemasterIsAuthor %} / auteur(rice) du jeu{% endif %}</h4>
              <p>
               {{ party.getGamemaster.description }}
              </p>
        
            </div>
          </div>
	    </article>
    </div>
    {% if party.getDescription %}
    <div class="container is-hidden" id="tab-3">
      <p>{{ party.getDescription }}</p>
      
    </div>
    {% endif %}
    {% if party.getSeatsLeft > 0 %}
      {% if party.getEndOn > date() or is_granted('ROLE_MANAGER') %}
    <div class="container is-hidden" id="tab-4">
    
    {{ form_errors(form) }}
    {{ form_start(form, {action: path(pathController, {id: party.slots.first.getId}), attr: {'data-turbo-frame': 'modal-content'}}) }}

    {{ form_row(form.participantName) }}
    {{ form_row(form.participantEmail) }}
    {{ form_row(form.participantPhone) }}

    <div class="field">
      {{ form_widget(form.consentMail) }}
      {{ form_label(form.consentMail) }}
    </div>

    <div class="field">
      {{ form_widget(form.consentImage) }}
      {{ form_label(form.consentImage) }}
      {{ form_help(form.consentImage) }}
    </div>

    {% if party.getSeatsLeft > 1 %}

    <div class="box">
      <div class="block">
        <h3 class="title is-6">Participation de groupe</h3>
        <p>Si des joueur(euse)s vous accompagnent sur cette partie, inscrivez simplement leurs noms ci-dessous.</p>
      </div>
      <div class="block">
      {% for i in 2..party.getSeatsLeft %}
        <div class="field">
          <label class="label">Accompagnant(e) {{ i-1 }}</label>
          <input id="party_more_{{ i-1 }}" name="party_more[{{ i-1 }}]" class="input" type="text" />
        </div>
      {% endfor %}
      </div>

    </div>

    {% endif %}

    {{ form_widget(form)}}

    <div class="control">
        <button class="button is-primary" type="submit">Envoyer</button>
    </div>
    
    {{ form_end(form) }}

    </div>
    {% endif %}

    {% endif %}
 </div>


{% endblock %}