<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Nos prochains événements</title>
</head>
<body style="margin:0; padding:0; background-color:#f0f4f8;">
  <center style="width:100%; background-color:#f0f4f8;">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">  
      <tr>
        <td align="center">
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#ffffff;">
            
            <!-- HEADER -->
            <tr>
              <td style="padding:20px; text-align:center; background-color:#0066cc; color:#ffffff; font-family:Arial, Helvetica, sans-serif;">
                <h1 style="margin:0; font-size:24px;">✨ Nos événements du mois ✨</h1>
              </td>
            </tr>

            <!-- INTRO -->
            <tr>
              <td style="padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#333333; line-height:1.6;">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Sed feugiat, sapien ut pulvinar luctus, ex metus tincidunt ante, 
                  non egestas mauris velit nec libero. Praesent at luctus nunc.
                </p>
              </td>
            </tr>

						{% for event in events %}
            <!-- ÉVÉNEMENT -->
            <tr>
              <td style="border-bottom:1px solid #e0e0e0;">
                <!-- Image -->
                <img src="{{ ('/events/' ~ (event.picture ?: 'placeholder.webp'))|base64img }}" alt="{{ event.name }}" width="600" height="200"
                     style="display:block; border:0; margin:0; padding:0;">
                <!-- Contenu -->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td style="padding:20px;">
                      
                      <!-- Panneau infos -->
                      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <td style="background:#e6f2ff; padding:15px; border-radius:6px;">
                            <h2 style="margin:0; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#004080;">
                              {{ event.name }}
                            </h2>
                            <p style="margin:8px 0 4px 0; font-size:14px; color:#004080; font-family:Arial, Helvetica, sans-serif;">
                              <strong>Lieu :</strong> A COMPLETER
                            </p>
                            <p style="margin:4px 0; font-size:14px; color:#004080; font-family:Arial, Helvetica, sans-serif;">
                              <strong>Date :</strong> du {{ event.startOn|date('d/m/Y \\à H:i') }} au {{ event.endOn|date('d/m/Y \\à H:i') }}
                            </p>
                          </td>
                        </tr>
                      </table>

                      <!-- Texte -->
                      <p style="margin:12px 0 16px 0; font-size:14px; color:#555555; line-height:1.5; font-family:Arial, Helvetica, sans-serif;">
                        {{ event.description }}
                      </p>
                      
                    	{% set authors = [] %}
                    	{% for party in event.parties %}
                          {% if party.gamemasterIsAuthor and party.gamemaster not in authors %}
                              {% set authors = authors|merge([party.gamemaster]) %}
                        	{% endif %}
                    	{% endfor %}
											{% if authors|length > 0 %}
											<p style="margin:12px 0 16px 0; font-size:16px; color:#333333; line-height:1.5; font-family:Arial, Helvetica, sans-serif;"><strong>Les auteur(rice)s présent(e)s</strong></p>
											{% for gamemaster in authors %}
											<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" 
                             style="background:#f5f5f5; border-radius:6px; margin-bottom:16px;">
                     		
                        <tr>
                          <td valign="top" style="padding:12px;vertical-align: top;" width="128">
                            <img src="{{ ('/gamemasters/' ~ (gamemaster.picture ?: 'placeholder.webp'))|base64img }}" alt="{{ gamemaster.preferedName }}" width="128" style="display:block; border-radius:6px;">
                          </td>
                          <td style="padding:12px; vertical-align:top;">
                            <p style="margin:0; font-size:16px; color:#004080; font-family:Arial, Helvetica, sans-serif;">
                              <strong>{{ gamemaster.preferedName }}</strong>
                            </p>
                            <p style="margin:6px 0 0 0; font-size:13px; color:#555555; line-height:1.4; font-family:Arial, Helvetica, sans-serif;">
                              {{ gamemaster.description }}
                            </p>
                            <p style="margin:6px 0 0 0; font-size:13px; color:#555555; line-height:1.4; font-family:Arial, Helvetica, sans-serif;">
                              Auteur(rice) de : {{ gamemaster.authorOfGames|map(game => game.name)|join(', ') }}
                            </p>
                          </td>
                        </tr>
                      </table>
											{% endfor %}
                      {% endif %}

                      <p style="margin:12px 0 16px 0; font-size:14px; color:#555555; line-height:1.5; font-family:Arial, Helvetica, sans-serif;">
                        Vous pouvez vous inscrire dès à présent à nos animations !
                      </p>

                      <!-- Boutons -->
                      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
                        <tr>
                          <td align="center" style="border-radius:4px; background:#0066cc; padding:10px 18px;">
                            <a href="{{ app_url ~ path('app_main_booking', {'id': event.id, 'view': 'pictures'})}}" style="font-size:14px; color:#ffffff; text-decoration:none; display:inline-block; font-family:Arial, Helvetica, sans-serif;">
                              Voir le détail et m'inscrire
                            </a>
                          </td>
                          <td style="width:10px;"></td>
                          <td align="center" style="border-radius:4px; background:#0099cc; padding:10px 18px;">
                 						<a href="{{ app_url|replace({'https://' : 'webcal://'}) ~ path('app_main_ics', {'id': event.id})  }}" style="font-size:14px; color:#ffffff; text-decoration:none; display:inline-block; font-family:Arial, Helvetica, sans-serif;">Ajouter à mon agenda</a>
                          </td>
                        </tr>
                      </table>
                      
                      

                    </td>
                  </tr>
                </table>
              </td>
            </tr>
						{%  endfor %}
						
            <!-- FOOTER -->
            <tr>
              <td style="padding:20px; text-align:center; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#888888;">
                Réalisé à partir de ORGASSO : une application pour tous vos événements rôlistiques !
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </center>

</body>
</html>