Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
1
2<section class="section">
3 <div class="container">
4 {% if is_legacy_event %}
5 <article class="message is-warning">
6 <div class="message-body">
7 <span class="icon-text">
8 <span class="icon">
9 <i class="fas fa-exclamation-triangle"></i>
10 </span>
11 <span>{{ t("legacy-event-warning") }}</span>
12 {% if standard_event_exists %}
13 <span class="ml-3">
14 <a href="{{ base }}{{ standard_event_url }}" class="button is-small is-primary">
15 <span class="icon">
16 <i class="fas fa-calendar-alt"></i>
17 </span>
18 <span>{{ t("view-latest") }}</span>
19 </a>
20 </span>
21 {% endif %}
22 {% if can_edit and not standard_event_exists %}
23 <span class="ml-3">
24 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/migrate" class="button is-small is-info">
25 <span class="icon">
26 <i class="fas fa-arrows-up-to-line"></i>
27 </span>
28 <span>{{ t("migrate-event") }}</span>
29 </a>
30 </span>
31 {% endif %}
32 </span>
33 </div>
34 </article>
35 {% elif using_fallback_collection %}
36 <article class="message is-info">
37 <div class="message-body">
38 <span class="icon-text">
39 <span class="icon">
40 <i class="fas fa-info-circle"></i>
41 </span>
42 <span>{{ t("fallback-collection-info", collection=fallback_collection) }}</span>
43 </span>
44 </div>
45 </article>
46 {% endif %}
47
48 <!-- Header avec image de couverture -->
49 <div class="box p-0 mb-4" style="overflow: hidden; border-radius: 12px;">
50 <!-- Image de couverture avec hero layout -->
51 <section class="hero is-small custom-hero">
52 <img src="https://picsum.photos/1600/400?random={{ event.rkey }}&blur=2&grayscale" alt="{{ event.name }} Background" class="hero-background">
53 <div class="hero-overlay"></div>
54 <div class="hero-body is-flex is-flex-direction-column is-justify-content-flex-end is-align-items-flex-start">
55 <h1 class="title is-3 hero-gradient-title mb-4" >{{ event.name }}</h1>
56 <p class="subtitle is-6 has-text-white-ter icon-text">
57 <span class="icon">
58 <i class="fas fa-calendar-alt"></i>
59 </span>
60 {% if event.starts_at_human %}
61 <span>
62 <time class="dt-start" {% if event.starts_at_machine %} datetime="{{ event.starts_at_machine }}" {% endif %}>
63 {{- event.starts_at_human -}}
64 </time>
65 {% if event.ends_at_human %}
66 - <time class="dt-end" {% if event.ends_at_machine %} datetime="{{ event.ends_at_machine }}" {% endif %}>
67 {{- event.ends_at_human -}}
68 </time>
69 {% endif %}
70 </span>
71 {% else %}
72 <span>{{ t("no-start-time-set") }}</span>
73 {% endif %}
74 </p>
75 {% if can_edit %}
76 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/edit" class="button is-medium is-outlined is-primary ml-2">
77 <span class="icon">
78 <i class="fas fa-edit"></i>
79 </span>
80 <span>{{ t("button-edit") }}</span>
81 </a>
82 {% endif %}
83 </div>
84 </section>
85
86 <!-- Badges de statut en overlay -->
87 <div style="position: absolute; top: 16px; left: 16px;">
88 {% if event.status == "planned" %}
89 <span class="tag is-light is-medium">
90 <span class="icon">
91 <i class="fas fa-calendar-days"></i>
92 </span>
93 <span>{{ t("status-planned") }}</span>
94 </span>
95 {% elif event.status == "rescheduled" %}
96 <span class="tag is-warning is-medium">
97 <span class="icon">
98 <i class="fas fa-calendar-plus"></i>
99 </span>
100 <span>{{ t("status-rescheduled") }}</span>
101 </span>
102 {% elif event.status == "scheduled" %}
103 <span class="tag is-info is-medium">
104 <span class="icon">
105 <i class="fas fa-calendar-check"></i>
106 </span>
107 <span>{{ t("status-scheduled") }}</span>
108 </span>
109 {% elif event.status == "cancelled" %}
110 <span class="tag is-danger is-medium">
111 <span class="icon">
112 <i class="fas fa-calendar-xmark"></i>
113 </span>
114 <span>{{ t("status-cancelled") }}</span>
115 </span>
116 {% elif event.status == "postponed" %}
117 <span class="tag is-warning is-medium">
118 <span class="icon">
119 <i class="fas fa-calendar-minus"></i>
120 </span>
121 <span>{{ t("status-postponed") }}</span>
122 </span>
123 {% endif %}
124 </div>
125 </div>
126
127 <!-- Actions RSVP (déplacé ici pour être pleine largeur) -->
128 {% if is_legacy_event %}
129 <article class="message is-info">
130 <div class="message-body">
131 <span class="icon-text">
132 <span class="icon">
133 <i class="fas fa-info-circle"></i>
134 </span>
135 <span>{{ t("legacy-rsvp-unavailable") }}</span>
136 {% if standard_event_exists %}
137 <span>{{ t("legacy-use-standard", url=base+standard_event_url) }}</span>
138 {% if user_rsvp_status and not user_has_standard_rsvp %}
139 <div class="mt-2">
140 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/migrate-rsvp"
141 class="button is-small is-info">
142 <span class="icon">
143 <i class="fas fa-sync-alt"></i>
144 </span>
145 <span>{{ t("migrate-rsvp") }}</span>
146 </a>
147 </div>
148 {% elif user_rsvp_status and user_has_standard_rsvp %}
149 <div class="mt-2">
150 <span class="tag is-success">
151 <span class="icon">
152 <i class="fas fa-check"></i>
153 </span>
154 <span>{{ t("legacy-rsvp-migrated") }}</span>
155 </span>
156 </div>
157 {% endif %}
158 {% endif %}
159 </span>
160 </div>
161 </article>
162 {% elif not current_handle %}
163 <article class="message is-success">
164 <div class="message-body">
165 {{ t("login-to-rsvp", url="/login") }}
166 </div>
167 </article>
168 {% else %}
169 {% if not user_rsvp_status %}
170 <article class="message" id="rsvpFrame">
171 <div class="message-body">
172 <div class="columns is-vcentered is-multiline">
173 <div class="column">
174 <p>{{ t("rsvp-not-rsvpd") }}</p>
175 </div>
176 <div class="column">
177 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
178 hx-swap="outerHTML"
179 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
180 <span class="icon">
181 <i class="fas fa-star"></i>
182 </span>
183 <span>{{ t("rsvp-going") }}</span>
184 </button>
185 </div>
186 <div class="column">
187 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
188 hx-swap="outerHTML"
189 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
190 <span class="icon">
191 <i class="fas fa-eye"></i>
192 </span>
193 <span>{{ t("rsvp-interested") }}</span>
194 </button>
195 </div>
196 <div class="column">
197 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
198 hx-swap="outerHTML"
199 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
200 <span class="icon">
201 <i class="fas fa-ban"></i>
202 </span>
203 <span>{{ t("rsvp-not-going") }}</span>
204 </button>
205 </div>
206 </div>
207 </div>
208 </article>
209 {% elif user_rsvp_status == "going" %}
210 <article class="message is-info" id="rsvpFrame">
211 <div class="message-body">
212 <div class="columns is-vcentered is-multiline">
213 <div class="column">
214 <p>{{ t("rsvp-going-msg") }}</p>
215 </div>
216 <div class="column">
217 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
218 hx-swap="outerHTML"
219 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
220 <span class="icon">
221 <i class="fas fa-eye"></i>
222 </span>
223 <span>{{ t("rsvp-interested") }}</span>
224 </button>
225 </div>
226 <div class="column">
227 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
228 hx-swap="outerHTML"
229 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
230 <span class="icon">
231 <i class="fas fa-ban"></i>
232 </span>
233 <span>{{ t("rsvp-not-going") }}</span>
234 </button>
235 </div>
236 </div>
237 </div>
238 </article>
239 {% elif user_rsvp_status == "interested" %}
240 <article class="message is-info" id="rsvpFrame">
241 <div class="message-body">
242 <div class="columns is-vcentered is-multiline">
243 <div class="column">
244 <p>{{ t("rsvp-interested-msg") }}</p>
245 </div>
246 <div class="column">
247 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
248 hx-swap="outerHTML"
249 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
250 <span class="icon">
251 <i class="fas fa-star"></i>
252 </span>
253 <span>{{ t("rsvp-going") }}</span>
254 </button>
255 </div>
256 <div class="column">
257 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
258 hx-swap="outerHTML"
259 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
260 <span class="icon">
261 <i class="fas fa-ban"></i>
262 </span>
263 <span>{{ t("rsvp-not-going") }}</span>
264 </button>
265 </div>
266 </div>
267 </div>
268 </article>
269 {% elif user_rsvp_status == "notgoing" %}
270 <article class="message is-warning" id="rsvpFrame">
271 <div class="message-body">
272 <div class="columns is-vcentered is-multiline">
273 <div class="column">
274 <p>{{ t("rsvp-not-going-msg") }}</p>
275 </div>
276 <div class="column">
277 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
278 hx-swap="outerHTML"
279 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
280 <span class="icon">
281 <i class="fas fa-star"></i>
282 </span>
283 <span>{{ t("rsvp-going") }}</span>
284 </button>
285 </div>
286 <div class="column">
287 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
288 hx-swap="outerHTML"
289 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
290 <span class="icon">
291 <i class="fas fa-eye"></i>
292 </span>
293 <span>{{ t("rsvp-interested") }}</span>
294 </button>
295 </div>
296 </div>
297 </div>
298 </article>
299 {% endif %}
300 {% endif %}
301
302 <!-- Section marque-pages -->
303 {% if current_handle and not is_legacy_event %}
304 <div class="columns is-vcentered">
305 <div class="column">
306 <div id="bookmarkFrame">
307 {% if user_bookmark_status %}
308 <article class="message is-info">
309 <div class="message-body">
310 <div class="columns is-vcentered">
311 <div class="column">
312 <span class="icon-text">
313 <span class="icon">
314 <i class="fas fa-bookmark"></i>
315 </span>
316 <span>Marqué{% if user_bookmark_tags %} avec étiquettes: {{ user_bookmark_tags | join(", ") }}{% endif %}</span>
317 </span>
318 </div>
319 <div class="column is-narrow">
320 <button class="button is-outlined is-danger is-small"
321 hx-delete="/bookmarks/{{ user_bookmark_aturi | urlencode }}"
322 hx-target="#bookmarkFrame"
323 hx-swap="outerHTML"
324 hx-confirm="Êtes-vous sûr·e de vouloir retirer ce marque-page?">
325 <span class="icon">
326 <i class="fas fa-times"></i>
327 </span>
328 <span>Retirer le marque-page</span>
329 </button>
330 </div>
331 </div>
332 </div>
333 </article>
334 {% else %}
335 <article class="message is-light">
336 <div class="message-body">
337 <div class="columns is-vcentered">
338 <div class="column">
339 <span class="icon-text">
340 <span class="icon">
341 <i class="far fa-bookmark"></i>
342 </span>
343 <span>Marquez cet événement pour l'ajouter à votre calendrier personnel</span>
344 </span>
345 </div>
346 <div class="column is-narrow">
347 <button class="button is-primary is-small"
348 hx-get="/bookmarks/modal?event_aturi={{ event.aturi | urlencode }}"
349 hx-target="#bookmarkModal"
350 hx-swap="innerHTML"
351 onclick="document.getElementById('bookmarkModal').classList.add('is-active')">
352 <span class="icon">
353 <i class="fas fa-bookmark"></i>
354 </span>
355 <span>Marquer l'événement</span>
356 </button>
357 </div>
358 </div>
359 </div>
360 </article>
361 {% endif %}
362 </div>
363 </div>
364 </div>
365 {% endif %}
366 <!-- Fin section marque-pages -->
367
368 <!-- Layout principal: 2 colonnes -->
369 <div class="columns is-desktop">
370 <!-- Colonne principale (gauche) -->
371 <div class="column is-8">
372 <!-- Statistiques (déplacé avant RSVP) -->
373 {% if not is_legacy_event %}
374 <div class="box mb-4">
375 <div class="level">
376 <div class="level-item has-text-centered">
377 <div>
378 <p class="heading">
379 <span class="icon">
380 <i class="fas fa-star"></i>
381 </span>
382 <span>{{ t("rsvp-status-going") }}</span>
383 </p>
384 <p class="title is-4 has-text-success">{{ event.count_going | default("0") }}</p>
385 </div>
386 </div>
387 <div class="level-item has-text-centered">
388 <div>
389 <p class="heading">
390 <span class="icon">
391 <i class="fas fa-eye"></i>
392 </span>
393 <span>{{ t("rsvp-status-interested") }}</span>
394 </p>
395 <p class="title is-4 has-text-info">{{ event.count_interested | default("0") }}</p>
396 </div>
397 </div>
398 <div class="level-item has-text-centered">
399 <div>
400 <p class="heading">
401 <span class="icon">
402 <i class="fas fa-ban"></i>
403 </span>
404 <span>{{ t("rsvp-status-not-going") }}</span>
405 </p>
406 <p class="title is-4 has-text-warning">{{ event.count_not_going | default("0") }}</p>
407 </div>
408 </div>
409 </div>
410 </div>
411 {% else %}
412 <div class="box mb-4">
413 <div class="notification is-light">
414 <p class="has-text-centered">
415 {{ t("legacy-rsvp-unavailable") }}
416 {% if standard_event_exists %}
417 <br><a href="{{ base }}{{ standard_event_url }}" class="button is-small is-primary mt-2">
418 <span class="icon">
419 <i class="fas fa-calendar-alt"></i>
420 </span>
421 <span>{{ t("view-latest") }}</span>
422 </a>
423 {% endif %}
424 </p>
425 </div>
426 </div>
427 {% endif %}
428
429 <!-- Détails de l'événement -->
430 <div class="box mb-4">
431 <h3 class="title is-5 mb-4">{{ t("event-description") }}</h3>
432
433 <!-- Date et heure -->
434 <div class="media mb-4">
435 <div class="media-left">
436 <span class="icon">
437 <i class="fas fa-clock"></i>
438 </span>
439 </div>
440 <div class="media-content">
441 <p>
442 {% if event.starts_at_human %}
443 {{ t("starts-at", time=event.starts_at_human) }}
444 {% if event.ends_at_human %}
445 <br>
446 {{ t("ends-at", time=event.ends_at_human) }}
447 {% endif %}
448 {% else %}
449 {{ t("no-start-time-set") }}
450 {% endif %}
451 </p>
452 </div>
453 </div>
454
455 <!-- Type d'événement -->
456 <div class="media mb-4">
457 <div class="media-left">
458 {% if event.mode == "inperson" %}
459 <span class="icon">
460 <i class="fas fa-users"></i>
461 </span>
462 {% elif event.mode == "virtual" %}
463 <span class="icon">
464 <i class="fas fa-globe"></i>
465 </span>
466 {% elif event.mode == "hybrid" %}
467 <span class="icon">
468 <i class="fas fa-user-plus"></i>
469 </span>
470 {% endif %}
471 </div>
472 <div class="media-content">
473 <p>
474 {% if event.mode == "inperson" %}
475 {{ t("mode-in-person") }}
476 {% elif event.mode == "virtual" %}
477 {{ t("mode-virtual") }}
478 {% elif event.mode == "hybrid" %}
479 {{ t("mode-hybrid") }}
480 {% endif %}
481 </p>
482 </div>
483 </div>
484
485 <!-- Liens -->
486 {% if event.links %}
487 <div class="media mb-4">
488 <div class="media-left">
489 <span class="icon">
490 <i class="fas fa-link"></i>
491 </span>
492 </div>
493 <div class="media-content">
494 <p class="is-size-7 has-text-grey">{{ t("placeholder-tickets") }}</p>
495 {% for (link, link_label) in event.links %}
496 <p class="mb-2">
497 <a href="{{ link }}" rel="nofollow" target="blank">
498 {{ link_label if link_label else link }}
499 </a>
500 </p>
501 {% endfor %}
502 </div>
503 </div>
504 {% endif %}
505
506 <!-- Description -->
507 <div class="media mb-4">
508 <div class="media-content">
509 <div class="content" style="word-break: break-word; white-space: pre-wrap;">
510 {%- autoescape false -%}
511 {{- event.description -}}
512 {%- endautoescape -%}
513 </div>
514 </div>
515 </div>
516 </div>
517 <!-- Organisateur -->
518 <div class="box mb-4">
519 <h2 class="title is-5 mb-4">{{ t("role-organizer") }}</h2>
520
521 <div class="has-text-centered">
522 <div class="is-inline-flex is-align-items-center is-justify-content-center mb-4"
523 style="width: 120px; height: 120px; background: linear-gradient(45deg, #00d1b2, #3273dc); border-radius: 50%;">
524 <span class="has-text-white is-size-1 has-text-weight-bold">
525 {{ event.organizer_display_name[0] | upper }}
526 </span>
527 </div>
528
529 <h3 class="title is-4 has-text-white mb-3">{{ event.organizer_display_name }}</h3>
530
531 <div class="content mb-4">
532 <p class="is-size-7 has-text-grey-light mb-2">{{ t("display-name") }}</p>
533 <a href="{{ base }}/{{ event.organizer_did }}" class="has-text-info">
534 @{{ event.organizer_display_name }}
535 </a>
536 </div>
537
538 <a href="{{ base }}/{{ event.organizer_did }}" class="button is-dark is-fullwidth">
539 <span class="icon is-small">
540 <i class="fas fa-user"></i>
541 </span>
542 <span>{{ t("view") }} {{ t("profile") }}</span>
543 </a>
544 </div>
545
546 </div>
547 </div>
548
549 <!-- Sidebar (droite) -->
550 <div class="column is-4">
551 <!-- Partage et calendrier -->
552 <div class="box mb-4">
553 <h4 class="title is-6 mb-3">{{ t("button-download-ical") }}</h4>
554 <div class="buttons are-small is-flex is-justify-content-center mb-3">
555 <a class="button" href="//bsky.app/intent/compose?text={{ event.name | urlencode }}&url={{ base }}/{{ handle_slug }}/{{ event_rkey }}" rel="nofollow" target="_blank">
556 <span class="icon">
557 <i class="fab fa-bluesky"></i>
558 </span>
559
560 </a>
561 <a class="button" href="//www.threads.net/intent/post?text={{ event.name }}&url={{ base }}/{{ handle_slug }}/{{ event_rkey }}" rel="nofollow" target="_blank">
562 <span class="icon">
563 <i class="fab fa-threads"></i>
564 </span>
565
566 </a>
567 <a class="button" href="//www.facebook.com/sharer/sharer.php?u={{ base }}/{{ handle_slug }}/{{ event_rkey }}" rel="nofollow" target="_blank">
568 <span class="icon">
569 <i class="fab fa-facebook"></i>
570 </span>
571
572 </a>
573
574 <a class="button" href="//www.reddit.com/submit?url={{ base }}/{{ handle_slug }}/{{ event_rkey }}&title={{ event.name }}" rel="nofollow" target="_blank">
575 <span class="icon">
576 <i class="fab fa-reddit"></i>
577 </span>
578 </a>
579
580 <a class="button" href="mailto:?subject={{ event.name | urlencode }}&body=Je%20voulais%20partager%20cet%20événement%20avec%20toi%20:%20{{ event.name | urlencode }}%0A%0ADate%20:%20{{ event.starts_at_human | urlencode }}%0ALien%20:%20{{ base }}/{{ handle_slug }}/{{ event_rkey }}" rel="nofollow">
581 <span class="icon">
582 <i class="fas fa-envelope"></i>
583 </span>
584
585 </a>
586 </div>
587 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/ical"
588 class="button is-outlined is-info is-fullwidth"
589 download="{{ event.name }}.ics">
590 <span class="icon">
591 <i class="fas fa-calendar-plus"></i>
592 </span>
593 <span>{{ t("button-download-ical") }}</span>
594 </a>
595 </div>
596
597 <!-- Carte / Lieu -->
598 {% if event.address_display %}
599 <div class="box mb-4">
600 <div class="event-map-container mt-3 mb-3">
601 <div id="event-location-map"
602 data-address="{{ event.address_display }}"
603 {% if event.coordinates_lat and event.coordinates_lng %}
604 data-lat="{{ event.coordinates_lat }}"
605 data-lng="{{ event.coordinates_lng }}"
606 {% endif %}></div>
607 <div id="event-map-loading" class="loading-overlay">
608 <div class="has-text-centered">
609 <div class="loader"></div>
610 <p class="mt-2">Chargement de la carte...</p>
611 </div>
612 </div>
613 <div id="event-map-error" class="is-hidden has-text-danger has-text-centered p-4">
614 <!-- Error message will be displayed here -->
615 </div>
616 </div>
617 <p class="mb-3">{{ event.address_display }}</p>
618 <div class="buttons are-small">
619 <a class="button is-fullwidth" href="//maps.apple.com/?q={{ event.address_display | urlencode }}" rel="nofollow" target="_blank">
620 <span class="icon">
621 <i class="fab fa-apple"></i>
622 </span>
623 <span>{{ t("apple-maps") }}</span>
624 </a>
625 <a class="button is-fullwidth" href="//maps.google.com/?q={{ event.address_display | urlencode }}" rel="nofollow" target="_blank">
626 <span class="icon">
627 <i class="fab fa-google"></i>
628 </span>
629 <span>{{ t("google-maps") }}</span>
630 </a>
631 </div>
632 </div>
633 {% elif event.mode == "inperson" or event.mode == "hybrid" %}
634 <div class="box mb-4">
635 <h4 class="title is-6 mb-3">{{ t("location") }}</h4>
636 <p class="has-text-grey">{{ t("no-location-info") }}</p>
637 </div>
638 {% endif %}
639
640 <!-- Participants -->
641 {% if not is_legacy_event %}
642 <div class="box">
643 <h4 class="title is-6 mb-3">{{ t("rsvp-status-going") }}</h4>
644 <div class="tabs is-small">
645 <ul>
646 <li {% if active_tab=="going" %}class="is-active" {% endif %}>
647 <a href="?tab=going&collection={{ fallback_collection if using_fallback_collection else collection }}"
648 rel="nofollow">
649 {{ t("going-count", count=event.count_going | default("0")) }}
650 </a>
651 </li>
652 <li {% if active_tab=="interested" %}class="is-active" {% endif %}>
653 <a href="?tab=interested&collection={{ fallback_collection if using_fallback_collection else collection }}"
654 rel="nofollow">
655 {{ t("interested-count", count=event.count_interested | default("0")) }}
656 </a>
657 </li>
658 <li {% if active_tab=="notgoing" %}class="is-active" {% endif %}>
659 <a href="?tab=notgoing&collection={{ fallback_collection if using_fallback_collection else collection }}"
660 rel="nofollow">
661 {{ t("not-going-count", count=event.count_not_going | default("0")) }}
662 </a>
663 </li>
664 </ul>
665 </div>
666 <div class="grid is-col-min-12 has-text-centered">
667 {% if active_tab == "going" %}
668 {% for handle in going %}
669 <span class="cell">
670 <a href="/@{{ handle }}">@{{ handle }}</a>
671 </span>
672 {% endfor %}
673 {% elif active_tab == "interested" %}
674 {% for handle in interested %}
675 <span class="cell">
676 <a href="/@{{ handle }}">@{{ handle }}</a>
677 </span>
678 {% endfor %}
679 {% else %}
680 {% for handle in notgoing %}
681 <span class="cell">
682 <a href="/@{{ handle }}">@{{ handle }}</a>
683 </span>
684 {% endfor %}
685 {% endif %}
686 </div>
687 </div>
688 {% endif %}
689 </div>
690 </div>
691 </div>
692</section>
693
694<!-- Modal marque-pages -->
695<div class="modal" id="bookmarkModal">
696 <div class="modal-background" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></div>
697 <div class="modal-content">
698 <!-- Le contenu du modal sera chargé via HTMX -->
699 </div>
700 <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></button>
701</div>