{% 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="columns">
      <div class="column has-text-right is-one-quarter">
        <strong>Horaires</strong>
      </div>
    <div class="column has-text-left">
        {{ party.getStartOn|date('d/m/y H:i', app_timezone)}} à {{ party.getEndOn|date('d/m/y H:i', app_timezone)}}
      </div>
    </div>
    <div class="columns">
      <div class="column has-text-right is-one-quarter">
        <strong>Espace</strong>
      </div>
      <div class="column has-text-left">
        {{ party.getSlots.first.getSpace.getName }}
      </div>
    </div>
    <div class="columns">
      <div class="column has-text-right is-one-quarter">
        <strong>Meneur(euse)</strong>
      </div>
      <div class="column has-text-left">
        <span class="icon">
            <figure class="image is-24x24 is-inline-block">
            {% if party.getGamemaster.picture %}
            <img class="is-rounded" src="/images/gamemasters/{{ party.getGamemaster.picture }}" />
            {% else %}
            <twig:ux:icon name="bi:person-fill"/>
            {% endif %}
            </figure>
        </span> 
        {{ party.getGamemaster.getPreferedName }}
      </div>
    </div>
    <div class="columns">
      <div class="column has-text-right is-one-quarter">
        <strong>Jeu</strong>
      </div>
      <div class="column has-text-left">
        {{ party.getGame.getName }}
      </div>
    </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>
     {% if party.getDescription %}<li data-id="tab-2"><a>Le scénario</a></li>{% endif %}
     {% if party.getSeatsLeft > 0 %}<li data-id="tab-3"><a>S'incrire</a></li>{% endif %}
   </ul>
 </div>
 
 <div id="tabs-content">
    <div class="container" id="tab-1">
      <p>{{ party.getGame.getDescription }}</p>
    </div>
    {% if party.getDescription %}
    <div class="container is-hidden" id="tab-2">
      <p>{{ party.getDescription }}</p>
      
    </div>
    {% endif %}
    {% if party.getSeatsLeft > 0 %}
    <div class="container is-hidden" id="tab-3">
    
    {{ 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>

    {{ form_widget(form)}}

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

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


{% endblock %}