{# Template pour les vignettes #}

<div class="block">
	<div class="fixed-grid has-3-cols-fullhd has-3-cols-widescreen has-2-cols-desktop has-2-cols-tablet has-1-cols-mobile">
		<div class="grid is-col-min-12">
		
			{% for party in event.getParties|sort((a, b) => a.startOn <=> b.startOn) %}
			<div class="cell{% if party.getSeatsLeft < 1 %} planning-cell-game-isfull{% endif %}">
				<div class="card">
					<div class="card-image" data-starton='{{ party.startOn|date('Ymdhi', app_timezone) }}' data-game='{{ party.game.slug }}' data-gamemaster='{{ party.gamemaster.slug }}' data-genre='{{ party.game.genre|map(p => p.slug)|join('|') }}'>
						{% if party.getSeatsLeft > 0 %}<a href="{{ path(pathLink, {id: party.getSlots.first.id}) }}" class="open-modal">{% endif %}
              <figure class="image is-3by1">
	              {% if party.game.picture %}
                  <img src="/images/games/{{ party.game.picture }}"  />
          	    {% else %}
                  <img src="/images/games/placeholder.webp"  />
        	      {% endif %}
              	<div class="overlay-tags">
              		{% if party.getSeatsLeft > 0 %}
                  <strong class="tag is-dark m-1 is-rounded" title="Places libres / places maximum">Places : {{ party.getSeatsLeft }}/{{ party.getMaxParticipants }}</strong>
                  {% else %}
                  <strong class="tag is-danger m-1 is-rounded">Complet !</strong>
                  {%  endif %}
                  {% if party.getGame.getAgeRecommendation %}<span class="tag m-1 is-primary is-rounded" title="{{ party.getGame.getAgeRecommendationLabel }}">{{ party.getGame.getAgeRecommendationLabel }}</span>{% endif %}
    	            {% if party.gamemasterIsAuthor %}<span class="tag is-warning m-1 is-rounded">partie animée par l'auteur</span>{% endif %}
      	          
  	          	</div>
  	         	</figure>
						{% if party.getSeatsLeft > 0 %}</a>{% endif %}
					</div>
					<div class="card-content">
						<div class="content ">
								<div class="media">
                    <div class="media-left">
                        <figure class="image is-48x48">
                            {% if party.gamemaster.picture %}
                                <img class="is-rounded" src="/images/gamemasters/{{ party.gamemaster.picture }}"  />
                            {% else %}
                                <twig:ux:icon name="bi:person-fill"/>
                            {% endif %}
                        </figure>
                    </div>
                
                    <div class="media-content">
    		           		<small class="has-text-grey-darker">animée par {{ party.gamemaster.preferedName }}</small><br/>
    	 								<strong class="title is-4">{{ party.game.name }}</strong>
                    </div>
                
  			      	</div>
							{% for genre in party.game.genre %}<span class="tag is-info m-1">{{ genre.genre }}</span>{% endfor %}
						</div>

						
						
					</div>
					<div class="card-footer">
						<div class="card-footer-item">
							<small>Le {{ party.startOn|date('d/m/Y \\d\\e H:i', app_timezone) }} à {{ party.endOn|date('H:i', app_timezone) }}</small>
						</div>
					</div>
				</div>
			</div>
			{%  endfor %}
		</div>
	</div>
</div>