Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<section class="section">
2 <div class="container">
3 {% if is_legacy_event %}
4 <article class="message is-warning">
5 <div class="message-body">
6 <span class="icon-text">
7 <span class="icon">
8 <i class="fas fa-exclamation-triangle"></i>
9 </span>
10 <span>{{ t("legacy-event-warning") }}</span>
11 {% if standard_event_exists %}
12 <span class="ml-3">
13 <a href="{{ base }}{{ standard_event_url }}" class="button is-small is-primary">
14 <span class="icon">
15 <i class="fas fa-calendar-alt"></i>
16 </span>
17 <span>{{ t("view-latest") }}</span>
18 </a>
19 </span>
20 {% endif %}
21 {% if can_edit and not standard_event_exists %}
22 <span class="ml-3">
23 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/migrate" class="button is-small is-info">
24 <span class="icon">
25 <i class="fas fa-arrows-up-to-line"></i>
26 </span>
27 <span>{{ t("migrate-event") }}</span>
28 </a>
29 </span>
30 {% endif %}
31 </span>
32 </div>
33 </article>
34 {% elif using_fallback_collection %}
35 <article class="message is-info">
36 <div class="message-body">
37 <span class="icon-text">
38 <span class="icon">
39 <i class="fas fa-info-circle"></i>
40 </span>
41 <span>{{ t("fallback-collection-info", collection=fallback_collection) }}</span>
42 </span>
43 </div>
44 </article>
45 {% endif %}
46 <h1 class="title">{{ event.name }}</h1>
47 <h1 class="subtitle">
48 <a href="{{ base }}/{{ event.organizer_did }}">
49 @{{ event.organizer_display_name }}
50 </a>
51 {% if can_edit %}
52 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/edit"
53 class="button is-small is-outlined is-primary ml-2">
54 <span class="icon">
55 <i class="fas fa-edit"></i>
56 </span>
57 <span>{{ t("button-edit") }}</span>
58 </a>
59 {% endif %}
60 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/ical"
61 class="button is-small is-outlined is-info ml-2"
62 download="{{ event.name }}.ics">
63 <span class="icon">
64 <i class="fas fa-calendar-plus"></i>
65 </span>
66 <span>{{ t("button-download-ical") }}</span>
67 </a>
68 </h1>
69 <div class="level subtitle">
70 {% if event.status == "planned" %}
71 <span class="icon-text" title="{{ t("tooltip-planned") }}">
72 <span class="icon">
73 <i class="fas fa-calendar-days"></i>
74 </span>
75 <span class="is-hidden-tablet">{{ t("status-planned") }}</span>
76 </span>
77 {% elif event.status == "scheduled" %}
78 <span class="level-item icon-text" title="{{ t("tooltip-scheduled") }}">
79 <span class="icon">
80 <i class="fas fa-calendar-check"></i>
81 </span>
82 <span>{{ t("status-scheduled") }}</span>
83 </span>
84 {% elif event.status == "rescheduled" %}
85 <span class="level-item icon-text is-info" title="{{ t("tooltip-rescheduled") }}">
86 <span class="icon">
87 <i class="fas fa-calendar-plus"></i>
88 </span>
89 <span>{{ t("status-rescheduled") }}</span>
90 </span>
91 {% elif event.status == "cancelled" %}
92 <span class="level-item icon-text is-danger" title="{{ t("tooltip-cancelled") }}">
93 <span class="icon">
94 <i class="fas fa-calendar-xmark"></i>
95 </span>
96 <span>{{ t("status-cancelled") }}</span>
97 </span>
98 {% elif event.status == "postponed" %}
99 <span class="level-item icon-text is-warning" title="{{ t("tooltip-postponed") }}">
100 <span class="icon">
101 <i class="fas fa-calendar-minus"></i>
102 </span>
103 <span>{{ t("status-postponed") }}</span>
104 </span>
105 {% else %}
106 <span class="level-item icon-text" title="{{ t("tooltip-no-status") }}">
107 <span class="icon">
108 <i class="fas fa-question"></i>
109 </span>
110 <span class="is-italic">{{ t("status-no-status") }}</span>
111 </span>
112 {% endif %}
113 <span class="level-item icon-text" title="
114 {%- if event.starts_at_human -%}
115 {{ t("starts-at", time=event.starts_at_human) }}
116 {%- else -%}
117 {{ t("no-start-time") }}
118 {%- endif -%}">
119 <span class="icon">
120 <i class="fas fa-clock"></i>
121 </span>
122 <span>
123 {% if event.starts_at_human %}
124 <time class="dt-start" {% if event.starts_at_machine %} datetime="{{ event.starts_at_machine }}" {%
125 endif %}>
126 {{- event.starts_at_human -}}
127 </time>
128 {% else %}
129 {{ t("no-start-time-set") }}
130 {% endif %}
131 </span>
132 </span>
133
134 <span class="level-item icon-text" title="
135 {%- if event.ends_at_human -%}
136 {{ t("ends-at", time=event.ends_at_human) }}
137 {%- else -%}
138 {{ t("no-end-time") }}
139 {%- endif -%}">
140 <span class="icon">
141 <i class="fas fa-stop"></i>
142 </span>
143 {% if event.ends_at_human %}
144 <span>
145 <time class="dt-end" {% if event.ends_at_machine %} datetime="{{ event.ends_at_machine }}" {% endif
146 %}>
147 {{- event.ends_at_human -}}
148 </time>
149 </span>
150 {% else %}
151 <span class="is-italic">{{ t("no-end-time-set") }}</span>
152 {% endif %}
153 </span>
154
155 {% if event.mode == "inperson" %}
156 <span class="level-item icon-text" title="{{ t("tooltip-in-person") }}">
157 <span class="icon">
158 <i class="fas fa-users"></i>
159 </span>
160 <span>{{ t("mode-in-person") }}</span>
161 </span>
162 {% elif event.mode == "virtual" %}
163 <span class="level-item icon-text" title="{{ t("tooltip-virtual") }}">
164 <span class="icon">
165 <i class="fas fa-globe"></i>
166 </span>
167 <span>{{ t("mode-virtual") }}</span>
168 </span>
169 {% elif event.mode == "hybrid" %}
170 <span class="level-item icon-text" title="{{ t("tooltip-hybrid") }}">
171 <span class="icon">
172 <i class="fas fa-user-plus"></i>
173 </span>
174 <span>{{ t("mode-hybrid") }}</span>
175 </span>
176 {% endif %}
177 </div>
178 {% if event.address_display %}
179 <div class="level subtitle">
180 <span class="level-item">
181 {{ event.address_display }}
182 </span>
183 <a class="level-item" href="//maps.apple.com/?q={{ event.address_display }}" rel="nofollow" target="blank">
184 <span class="icon-text">
185 <span class="icon">
186 <i class="fab fa-apple"></i>
187 </span>
188 <span>{{ t("apple-maps") }}</span>
189 </span>
190 </a>
191 <a class="level-item" href="//maps.google.com/?q={{ event.address_display }}" rel="nofollow" target="blank">
192 <span class="icon-text">
193 <span class="icon">
194 <i class="fab fa-google"></i>
195 </span>
196 <span>{{ t("google-maps") }}</span>
197 </span>
198 </a>
199 </div>
200 {% endif %}
201
202 {% if event.links %}
203 {% for (link, link_label) in event.links %}
204 <div class="level subtitle">
205 <a class="level-item" href="{{ link }}" rel="nofollow" target="blank">
206 <span class="icon-text">
207 <span class="icon">
208 <i class="fas fa-link"></i>
209 </span>
210 <span>{{ link_label if link_label else link }}</span>
211 </span>
212 </a>
213 </div>
214 {% endfor %}
215 {% endif %}
216 {% if is_legacy_event %}
217 <article class="message is-info">
218 <div class="message-body">
219 <span class="icon-text">
220 <span class="icon">
221 <i class="fas fa-info-circle"></i>
222 </span>
223 <span>{{ t("legacy-rsvp-unavailable") }}</span>
224 {% if standard_event_exists %}
225 <span>{{ t("legacy-use-standard", url=base+standard_event_url) }}</span>
226 {% if user_rsvp_status and not user_has_standard_rsvp %}
227 <div class="mt-2">
228 <a href="{{ base }}/{{ handle_slug }}/{{ event_rkey }}/migrate-rsvp"
229 class="button is-small is-info">
230 <span class="icon">
231 <i class="fas fa-sync-alt"></i>
232 </span>
233 <span>{{ t("migrate-rsvp") }}</span>
234 </a>
235 </div>
236 {% elif user_rsvp_status and user_has_standard_rsvp %}
237 <div class="mt-2">
238 <span class="tag is-success">
239 <span class="icon">
240 <i class="fas fa-check"></i>
241 </span>
242 <span>{{ t("legacy-rsvp-migrated") }}</span>
243 </span>
244 </div>
245 {% endif %}
246 {% endif %}
247 </span>
248 </div>
249 </article>
250 {% elif not current_handle %}
251 <article class="message is-success">
252 <div class="message-body">
253 {{ t("message-login-to-rsvp") }}
254 </div>
255 </article>
256 {% else %}
257 {% if not user_rsvp_status %}
258 <article class="message" id="rsvpFrame">
259 <div class="message-body">
260 <div class="columns is-vcentered is-multiline">
261 <div class="column">
262 <p>{{ t("rsvp-not-rsvpd") }}</p>
263 </div>
264 <div class="column">
265 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
266 hx-swap="outerHTML"
267 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
268 <span class="icon">
269 <i class="fas fa-star"></i>
270 </span>
271 <span>{{ t("rsvp-going") }}</span>
272 </button>
273 </div>
274 <div class="column">
275 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
276 hx-swap="outerHTML"
277 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
278 <span class="icon">
279 <i class="fas fa-eye"></i>
280 </span>
281 <span>{{ t("rsvp-interested") }}</span>
282 </button>
283 </div>
284 <div class="column">
285 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
286 hx-swap="outerHTML"
287 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
288 <span class="icon">
289 <i class="fas fa-ban"></i>
290 </span>
291 <span>{{ t("rsvp-not-going") }}</span>
292 </button>
293 </div>
294 </div>
295 </div>
296 </article>
297 {% elif user_rsvp_status == "going" %}
298 <article class="message is-info" id="rsvpFrame">
299 <div class="message-body">
300 <div class="columns is-vcentered is-multiline">
301 <div class="column">
302 <p>{{ t("rsvp-going-msg") }}</p>
303 </div>
304 <div class="column">
305 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
306 hx-swap="outerHTML"
307 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
308 <span class="icon">
309 <i class="fas fa-eye"></i>
310 </span>
311 <span>{{ t("rsvp-interested") }}</span>
312 </button>
313 </div>
314 <div class="column">
315 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
316 hx-swap="outerHTML"
317 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
318 <span class="icon">
319 <i class="fas fa-ban"></i>
320 </span>
321 <span>{{ t("rsvp-not-going") }}</span>
322 </button>
323 </div>
324 </div>
325 </div>
326 </article>
327 {% elif user_rsvp_status == "interested" %}
328 <article class="message is-info" id="rsvpFrame">
329 <div class="message-body">
330 <div class="columns is-vcentered is-multiline">
331 <div class="column">
332 <p>{{ t("rsvp-interested-msg") }}</p>
333 </div>
334 <div class="column">
335 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
336 hx-swap="outerHTML"
337 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
338 <span class="icon">
339 <i class="fas fa-star"></i>
340 </span>
341 <span>{{ t("rsvp-going") }}</span>
342 </button>
343 </div>
344 <div class="column">
345 <button class="button is-warning is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
346 hx-swap="outerHTML"
347 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "notgoing"}'>
348 <span class="icon">
349 <i class="fas fa-ban"></i>
350 </span>
351 <span>{{ t("rsvp-not-going") }}</span>
352 </button>
353 </div>
354 </div>
355 </div>
356 </article>
357 {% elif user_rsvp_status == "notgoing" %}
358 <article class="message is-warning" id="rsvpFrame">
359 <div class="message-body">
360 <div class="columns is-vcentered is-multiline">
361 <div class="column">
362 <p>{{ t("rsvp-not-going-msg") }}</p>
363 </div>
364 <div class="column">
365 <button class="button is-success is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
366 hx-swap="outerHTML"
367 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "going"}'>
368 <span class="icon">
369 <i class="fas fa-star"></i>
370 </span>
371 <span>{{ t("rsvp-going") }}</span>
372 </button>
373 </div>
374 <div class="column">
375 <button class="button is-link is-fullwidth" hx-post="/rsvp" hx-target="#rsvpFrame"
376 hx-swap="outerHTML"
377 hx-vals='{"subject_aturi": "{{ event.aturi }}", "build_state": "Review", "status": "interested"}'>
378 <span class="icon">
379 <i class="fas fa-eye"></i>
380 </span>
381 <span>{{ t("rsvp-interested") }}</span>
382 </button>
383 </div>
384 </div>
385 </div>
386 </article>
387 {% endif %}
388 {% endif %}
389
390 <!-- Bookmark Section -->
391 {% if current_handle and not is_legacy_event %}
392 <div class="columns is-vcentered">
393 <div class="column">
394 <div id="bookmarkFrame">
395 {% if user_bookmark_status %}
396 <article class="message is-info">
397 <div class="message-body">
398 <div class="columns is-vcentered">
399 <div class="column">
400 <span class="icon-text">
401 <span class="icon">
402 <i class="fas fa-bookmark"></i>
403 </span>
404 <span>Bookmarked{% if user_bookmark_tags %} with tags: {{ user_bookmark_tags | join(", ") }}{% endif %}</span>
405 </span>
406 </div>
407 <div class="column is-narrow">
408 <button class="button is-outlined is-danger is-small"
409 hx-delete="/bookmarks/{{ user_bookmark_aturi | urlencode }}"
410 hx-target="#bookmarkFrame"
411 hx-swap="outerHTML"
412 hx-confirm="Are you sure you want to remove this bookmark?">
413 <span class="icon">
414 <i class="fas fa-times"></i>
415 </span>
416 <span>Remove Bookmark</span>
417 </button>
418 </div>
419 </div>
420 </div>
421 </article>
422 {% else %}
423 <article class="message is-light">
424 <div class="message-body">
425 <div class="columns is-vcentered">
426 <div class="column">
427 <span class="icon-text">
428 <span class="icon">
429 <i class="far fa-bookmark"></i>
430 </span>
431 <span>Bookmark this event to add it to your personal calendar</span>
432 </span>
433 </div>
434 <div class="column is-narrow">
435 <button class="button is-primary is-small"
436 hx-get="/bookmarks/modal?event_aturi={{ event.aturi | urlencode }}"
437 hx-target="#bookmarkModal"
438 hx-swap="innerHTML"
439 onclick="document.getElementById('bookmarkModal').classList.add('is-active')">
440 <span class="icon">
441 <i class="fas fa-bookmark"></i>
442 </span>
443 <span>Bookmark Event</span>
444 </button>
445 </div>
446 </div>
447 </div>
448 </article>
449 {% endif %}
450 </div>
451 </div>
452 </div>
453 {% endif %}
454 <!-- End Bookmark Section -->
455 </div>
456</section>
457
458<section class="section">
459 <div class="container" style="word-break: break-word; white-space: pre-wrap;">
460 {%- autoescape false -%}
461 {{- event.description -}}
462 {%- endautoescape -%}
463 </div>
464</section>
465
466<section class="section">
467 <div class="container">
468 {% if not is_legacy_event %}
469 <div class="tabs">
470 <ul>
471 <li {% if active_tab=="going" %}class="is-active" {% endif %}>
472 <a href="?tab=going&collection={{ fallback_collection if using_fallback_collection else collection }}"
473 rel="nofollow">
474 {{ t("going-count", count=event.count_going | default("0")) }}
475 </a>
476 </li>
477 <li {% if active_tab=="interested" %}class="is-active" {% endif %}>
478 <a href="?tab=interested&collection={{ fallback_collection if using_fallback_collection else collection }}"
479 rel="nofollow">
480 {{ t("interested-count", count=event.count_interested | default("0")) }}
481 </a>
482 </li>
483 <li {% if active_tab=="notgoing" %}class="is-active" {% endif %}>
484 <a href="?tab=notgoing&collection={{ fallback_collection if using_fallback_collection else collection }}"
485 rel="nofollow">
486 {{ t("not-going-count", count=event.count_not_going | default("0")) }}
487 </a>
488 </li>
489 </ul>
490 </div>
491 <div class="grid is-col-min-12 has-text-centered">
492 {% if active_tab == "going" %}
493 {% for handle in going %}
494 <span class="cell">
495 <a href="/@{{ handle }}">@{{ handle }}</a>
496 </span>
497 {% endfor %}
498 {% elif active_tab == "interested" %}
499 {% for handle in interested %}
500 <span class="cell">
501 <a href="/@{{ handle }}">@{{ handle }}</a>
502 </span>
503 {% endfor %}
504 {% else %}
505 {% for handle in notgoing %}
506 <span class="cell">
507 <a href="/@{{ handle }}">@{{ handle }}</a>
508 </span>
509 {% endfor %}
510 {% endif %}
511 </div>
512 {% else %}
513 <div class="notification is-light">
514 <p class="has-text-centered">
515 {{ t("legacy-rsvp-info-unavailable") }}
516 {% if standard_event_exists %}
517 <br><a href="{{ base }}{{ standard_event_url }}" class="button is-small is-primary mt-2">
518 <span class="icon">
519 <i class="fas fa-calendar-alt"></i>
520 </span>
521 <span>{{ t("legacy-view-latest-rsvps") }}</span>
522 </a>
523 {% endif %}
524 </p>
525 </div>
526 {% endif %}
527 </div>
528</section>
529
530<!-- Bookmark Modal -->
531<div class="modal" id="bookmarkModal">
532 <div class="modal-background" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></div>
533 <div class="modal-content">
534 <!-- Modal content will be loaded via HTMX -->
535 </div>
536 <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></button>
537</div>