Working localization

templates/index.html.tera

@@ -21,7 +21,7 @@
             {% endif %}
             {% if user %}
             <div class="dropdown right">
-                <a href="/users/{{ user.id }}">
+                <a href="/users/{{ user.id }}" class="link">
                     <span>{{ user.username }}</span> <img src="https://cdn.discordapp.com/avatars/{{ user.id }}/{{ user.avatar }}.webp?size=1024">
                 </a>
                 <nav class="dropdown-content">
@@ -30,10 +30,22 @@
                     </a>
                 </nav>
             </div>
-
             {% else%}
             <a href="/login" class="right">Log in</a>
             {% endif %}
+            <div class="dropdown">
+                <span class="link">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="height: 1.5em">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
+                    </svg>
+                </span>
+                <nav class="dropdown-content">
+                    {% set langs = 0 | langs %}
+                    {% for lang in langs %}
+                        <span class="link" onclick="document.cookie = 'lang={{ lang.code }}; expires=Tue, 19 Jan 2038 03:14:07 UTC; SameSite=Strict; path=/'; location.reload()">{{ lang.name }}</span>
+                    {% endfor %}
+                </nav>
+            </a>
         </nav>
         <div>
             <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>

templates/modal.html.tera

@@ -1,5 +1,5 @@
 <dialog>
-    <h1>Welcome to {{ "title" | i18n }}!</h1> 
+    <h1>Welcome to {{ "title" | i18n(lang=lang) }}!</h1> 
     <p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
     <h2>Join a participating server</h2>
     <div class="servers">