sandwitches 2.2.0__py3-none-any.whl

sandwitches/templates/admin/task_detail.html

@@ -0,0 +1,91 @@
+{% extends "admin/admin_base.html" %}
+{% load i18n %}
+
+{% block admin_title %}{% trans "Task Details" %}: {{ task.id }}{% endblock %}
+
+{% block content %}
+<nav class="mb-2">
+    <a href="{% url 'admin_task_list' %}" class="button transparent circle"><i>arrow_back</i></a>
+    <h5 class="max bold ml-2">{% trans "Task" %} {{ task.id|truncatechars:12 }}</h5>
+</nav>
+
+<div class="grid">
+    <div class="s12 m8">
+        <article class="round padding border">
+            <h6 class="bold mb-1">{% trans "General Information" %}</h6>
+            <div class="divider mb-1"></div>
+
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Task Path" %}:</div>
+                <div class="max"><code>{{ task.task_path }}</code></div>
+            </div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Status" %}:</div>
+                <div class="max">
+                    {% if task.status == 'SUCCEEDED' %}
+                    <span class="chip tiny primary"><i>done</i> {{ task.status }}</span>
+                    {% elif task.status == 'FAILED' %}
+                    <span class="chip tiny error"><i>error</i> {{ task.status }}</span>
+                    {% else %}
+                    <span class="chip tiny surface"><i>schedule</i> {{ task.status }}</span>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Queue" %}:</div>
+                <div class="max">{{ task.queue_name }}</div>
+            </div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Priority" %}:</div>
+                <div class="max">{{ task.priority }}</div>
+            </div>
+
+            <div class="space"></div>
+
+            <h6 class="bold mb-1">{% trans "Timeline" %}</h6>
+            <div class="divider mb-1"></div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Enqueued At" %}:</div>
+                <div class="max">{{ task.enqueued_at|date:"DATETIME_FORMAT" }}</div>
+            </div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Started At" %}:</div>
+                <div class="max">{{ task.started_at|date:"DATETIME_FORMAT"|default:"-" }}</div>
+            </div>
+            <div class="row mb-1">
+                <div class="max bold">{% trans "Finished At" %}:</div>
+                <div class="max">{{ task.finished_at|date:"DATETIME_FORMAT"|default:"-" }}</div>
+            </div>
+        </article>
+
+        <div class="space"></div>
+
+        <article class="round padding border">
+            <h6 class="bold mb-1">{% trans "Arguments" %}</h6>
+            <div class="divider mb-1"></div>
+            <pre class="padding surface-variant round scroll" style="max-height: 200px;"><code>{{ task.args_kwargs }}</code></pre>
+        </article>
+    </div>
+
+    <div class="s12 m4">
+        {% if task.return_value %}
+        <article class="round padding border primary-container">
+            <h6 class="bold mb-1">{% trans "Result" %}</h6>
+            <div class="divider mb-1"></div>
+            <div class="scroll" style="max-height: 300px;">
+                {{ task.return_value }}
+            </div>
+        </article>
+        {% endif %}
+
+        {% if task.traceback %}
+        <article class="round padding border error-container mt-1">
+            <h6 class="bold mb-1">{% trans "Error" %}</h6>
+            <div class="divider mb-1"></div>
+            <div class="bold mb-1">{{ task.exception_class_path }}</div>
+            <pre class="padding surface-variant round scroll small-text" style="max-height: 400px; white-space: pre-wrap;"><code>{{ task.traceback }}</code></pre>
+        </article>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

sandwitches/templates/admin/task_list.html

@@ -0,0 +1,41 @@
+{% extends "admin/admin_base.html" %}
+{% load i18n %}
+
+{% block admin_title %}{% trans "Background Tasks" %}{% endblock %}
+
+{% block content %}
+<h5 class="bold mb-2">{% trans "Task Results" %}</h5>
+
+<table class="border striped no-space">
+    <thead>
+        <tr>
+            <th class="min">{% trans "ID" %}</th>
+            <th>{% trans "Task Class" %}</th>
+            <th class="min">{% trans "Status" %}</th>
+            <th>{% trans "Finished" %}</th>
+            <th class="right-align">{% trans "Actions" %}</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for task in tasks %}
+        <tr class="pointer" onclick="location.href='{% url 'admin_task_detail' task.id %}'">
+            <td class="min">{{ task.id|truncatechars:12 }}</td>
+            <td><code>{{ task.task_class }}</code></td>
+            <td class="min">
+                {% if task.status == 'SUCCEEDED' %}
+                <span class="chip tiny primary"><i>done</i> {{ task.status }}</span>
+                {% elif task.status == 'FAILED' %}
+                <span class="chip tiny error"><i>error</i> {{ task.status }}</span>
+                {% else %}
+                <span class="chip tiny surface"><i>schedule</i> {{ task.status }}</span>
+                {% endif %}
+            </td>
+            <td>{{ task.finished_at|date:"SHORT_DATETIME_FORMAT"|default:"-" }}</td>
+            <td class="right-align">
+                <i class="grey-text">chevron_right</i>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}

sandwitches/templates/admin/user_form.html

@@ -0,0 +1,37 @@
+{% extends "admin/admin_base.html" %}
+{% load i18n %}
+
+{% block admin_title %}{% trans "Edit User" %}: {{ user_obj.username }}{% endblock %}
+
+{% block content %}
+<article class="round padding">
+    <form method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+        <div class="grid">
+            {% for field in form %}
+            <div class="s12">
+                {% if field.field.widget.input_type == "checkbox" %}
+                <label class="checkbox">
+                    {{ field }}
+                    <span>{{ field.label }}</span>
+                </label>
+                {% else %}
+                <div class="field label border round">
+                    {{ field }}
+                    <label>{{ field.label }}</label>
+                </div>
+                {% endif %}
+                {% if field.errors %}
+                <span class="error">{{ field.errors|striptags }}</span>
+                {% endif %}
+            </div>
+            {% endfor %}
+        </div>
+        <div class="space"></div>
+        <nav class="right-align">
+            <a href="{% url 'admin_user_list' %}" class="button transparent">{% trans "Cancel" %}</a>
+            <button type="submit" class="button primary round">{% trans "Save" %}</button>
+        </nav>
+    </form>
+</article>
+{% endblock %}

sandwitches/templates/admin/user_list.html

@@ -0,0 +1,60 @@
+{% extends "admin/admin_base.html" %}
+{% load i18n %}
+
+{% block admin_title %}{% trans "Users" %}{% endblock %}
+
+{% block content %}
+<h5 class="bold mb-2">{% trans "User Management" %}</h5>
+
+<table class="border striped no-space">
+    <thead>
+        <tr>
+            <th class="min">{% trans "Avatar" %}</th>
+            <th class="max">{% trans "User" %}</th>
+            <th>{% trans "Email" %}</th>
+            <th class="min center-align">{% trans "Staff" %}</th>
+            <th class="min center-align">{% trans "Active" %}</th>
+            <th class="right-align">{% trans "Actions" %}</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for u in users %}
+        <tr class="pointer" onclick="location.href='{% url 'admin_user_edit' u.pk %}'">
+            <td class="min">
+                {% if u.avatar %}
+                <img src="{{ u.avatar.url }}" class="admin-thumb round">
+                {% else %}
+                <div class="admin-thumb round gray1 middle-align center-align">
+                    <i class="extra">person</i>
+                </div>
+                {% endif %}
+            </td>
+            <td class="max">
+                <b>{{ u.username }}</b>
+                <div class="small-text">{{ u.get_full_name }}</div>
+            </td>
+            <td>{{ u.email }}</td>
+            <td class="min center-align">
+                {% if u.is_staff %}
+                <i class="primary-text">check_circle</i>
+                {% else %}
+                <i class="grey-text">cancel</i>
+                {% endif %}
+            </td>
+            <td class="min center-align">
+                {% if u.is_active %}
+                <i class="primary-text">check_circle</i>
+                {% else %}
+                <i class="grey-text">cancel</i>
+                {% endif %}
+            </td>
+            <td class="right-align">
+                {% if u != request.user %}
+                <a href="{% url 'admin_user_delete' u.pk %}" class="button circle transparent" onclick="event.stopPropagation();" title="{% trans 'Delete' %}"><i>delete</i></a>
+                {% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}

sandwitches/templates/base.html

@@ -0,0 +1,94 @@
+{% load i18n %}
+<!DOCTYPE html>
+<html lang="{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE }}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>{% block title %}Sandwitches{% endblock %}</title>
+    <style>
+      body {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+      }
+      main.container {
+          flex: 1;
+          padding-bottom: 80px;
+      }
+      /* Loading Sandwich CSS */
+      .loading-sandwich-container {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          z-index: 9999;
+          visibility: hidden; /* Hidden by default */
+          opacity: 0;
+          transition: visibility 0s, opacity 0.3s linear;
+      }
+      .loading-sandwich-container.show {
+          visibility: visible;
+          opacity: 1;
+      }
+      .loading-sandwich-svg {
+          width: 80px;
+          height: 80px;
+          animation: spin 1.5s linear infinite;
+      }
+      @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+      }
+    </style>
+    {% block extra_head %}{% endblock %}
+  </head>
+  <body class="{% block body_class %}{% endblock %}">
+    <div id="loading-sandwich" class="loading-sandwich-container">
+        <svg class="loading-sandwich-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+            <path d="M12 9v6" />
+            <path d="M10 12h4" />
+        </svg>
+    </div>
+    {% block navbar %}{% endblock %}
+    <main class="container" role="main">{% block content %}{% endblock %}</main>
+    {% block footer %}{% endblock %}
+    {% block extra_scripts %}{% endblock %}
+
+    <script>
+        // JavaScript to show/hide the loading animation
+        const loadingSandwich = document.getElementById('loading-sandwich');
+
+        function showLoading() {
+            loadingSandwich.classList.add('show');
+        }
+
+        function hideLoading() {
+            loadingSandwich.classList.remove('show');
+        }
+
+        // Example usage: You would call showLoading() before an async operation
+        // and hideLoading() after it completes.
+        // For demonstration, let's show it on page load for a brief moment.
+        document.addEventListener('DOMContentLoaded', () => {
+            // Can uncomment below for debugging purposes
+            // showLoading();
+            // setTimeout(hideLoading, 1000);
+        });
+
+        // Intercept form submissions to show loading animation
+        document.querySelectorAll('form').forEach(form => {
+            form.addEventListener('submit', showLoading);
+        });
+
+        // Hide loading animation on page load completion (after initial DOMContentLoaded)
+        window.addEventListener('load', hideLoading);
+
+    </script>
+  </body>
+</html>

sandwitches/templates/base_beer.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %} {% load i18n static %} {% block extra_head %}
+<link href="{% static "dist/main.css" %}" rel="stylesheet">
+<script src="{% static "dist/main.js" %}" defer></script>
+<link rel="icon" type="image/svg+xml" href="{% static "icons/favicon.svg" %}">
+<style>
+    main.container {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+</style>
+{% endblock %}
+
+{% block navbar %}
+    {% include "components/navbar.html" %}
+    {% include "components/language_dialog.html" %}
+    {% include "components/user_menu.html" %}
+    {% include "components/side_menu.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "components/footer.html" %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+    document.addEventListener('keydown', function(event) {
+        // Don't trigger hotkeys if an input field is focused
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.tagName === 'SELECT') {
+            return;
+        }
+
+        // 'q' for search
+        if (event.key === 'q') {
+            const searchInput = document.getElementById('search');
+            if (searchInput) {
+                event.preventDefault(); // Prevent 'q' from being typed
+                searchInput.focus();
+                // If the advanced search is hidden, show it
+                const advancedSearch = document.getElementById('advanced-search');
+                if (advancedSearch && advancedSearch.style.display === 'none') {
+                    toggleAdvanced(); // Assuming toggleAdvanced is a global function from index.html
+                }
+            }
+        }
+
+        // 'f' for favorite (only on recipe detail pages)
+        if (event.key === 'f') {
+            const favoriteButton = document.getElementById('favorite-toggle-button');
+            if (favoriteButton) {
+                event.preventDefault(); // Prevent default browser behavior (e.g., finding text)
+                favoriteButton.click();
+            }
+        }
+    });
+</script>
+{% block page_scripts %}{% endblock %}
+{% endblock %}

sandwitches/templates/components/carousel_scripts.html

@@ -0,0 +1,59 @@
+<script>
+(function() {
+    const carousel = document.getElementById('highlighted-carousel');
+    const scrollAmount = 320; // Approximately card width + margin
+    let autoScrollInterval;
+
+    window.scrollCarousel = function(direction) {
+        if (carousel) {
+            const currentScroll = carousel.scrollLeft;
+            const maxScroll = carousel.scrollWidth - carousel.clientWidth;
+            
+            let newScroll = currentScroll + (direction * scrollAmount);
+            
+            // Loop functionality for manual navigation? 
+            // Maybe just stop at ends or loop? Let's just scroll.
+            carousel.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
+        }
+    }
+
+    function autoScroll() {
+        if (!carousel) return;
+
+        const currentScroll = carousel.scrollLeft;
+        const maxScroll = carousel.scrollWidth - carousel.clientWidth;
+        
+        // Tolerance for float calculation
+        if (currentScroll >= maxScroll - 10) {
+            // Loop back to start
+            carousel.scrollTo({ left: 0, behavior: 'smooth' });
+        } else {
+            carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        }
+    }
+
+    function startAutoScroll() {
+        stopAutoScroll(); // Clear any existing
+        autoScrollInterval = setInterval(autoScroll, 5000); // 5 seconds
+    }
+
+    function stopAutoScroll() {
+        if (autoScrollInterval) {
+            clearInterval(autoScrollInterval);
+        }
+    }
+
+    if (carousel) {
+        // Start auto-scroll
+        startAutoScroll();
+
+        // Pause on interaction
+        carousel.addEventListener('mouseenter', stopAutoScroll);
+        carousel.addEventListener('mouseleave', startAutoScroll);
+        
+        // Touch events for mobile
+        carousel.addEventListener('touchstart', stopAutoScroll);
+        carousel.addEventListener('touchend', startAutoScroll);
+    }
+})();
+</script>

sandwitches/templates/components/favorites_search_form.html

@@ -0,0 +1,85 @@
+{% load i18n %}
+<form hx-get="{% url 'favorites' %}" hx-target="#recipe-grid" hx-swap="outerHTML" hx-push-url="true" hx-trigger="change delay:500ms, keyup delay:500ms from:#search, submit, uploaderChange from:body">
+    <div class="grid">
+        <!-- Main Search Bar -->
+        <div class="s12">
+            <div class="field prefix suffix border round">
+                <i class="front">search</i>
+                <input id="search" type="text" name="q" placeholder="{% trans 'Search favorites...' %}" value="{{ request.GET.q|default:'' }}">
+                <a class="circle plain" onclick="toggleAdvanced()" title="{% trans 'Advanced Search' %}">
+                    <i id="advanced-icon">filter_list</i>
+                </a>
+            </div>
+        </div>
+
+        <!-- Collapsible Advanced Search Panel -->
+        <div id="advanced-search" class="s12 hidden" style="display: none;">
+            <div class="padding surface border round">
+                <div class="grid">
+                    <div class="s12 m6 l3">
+                        <div class="field label border round">
+                            <input type="date" name="date_start" value="{{ request.GET.date_start|default:'' }}">
+                            <label>{% trans "Start Date" %}</label>
+                        </div>
+                    </div>
+                    <div class="s12 m6 l3">
+                        <div class="field label border round">
+                            <input type="date" name="date_end" value="{{ request.GET.date_end|default:'' }}">
+                            <label>{% trans "End Date" %}</label>
+                        </div>
+                    </div>
+
+                    <!-- Custom Uploader Dropdown with Avatar -->
+                    <div class="s12 m6 l3">
+                        <div class="field label border round suffix relative" onclick="toggleUploaderMenu(event)">
+                            <input type="text" id="uploader-display" readonly value="{{ request.GET.uploader|default:'' }}" placeholder="{% trans 'All Uploaders' %}" style="cursor: pointer;">
+                            <label>{% trans "Uploader" %}</label>
+                            <i class="chevron-down">arrow_drop_down</i>
+
+                            <div id="uploader-menu" class="absolute surface elevate round left top-round bottom-round scroll" style="top: 100%; left: 0; right: 0; max-height: 300px; display: none; z-index: 20;">
+                                <a class="row padding hover pointer" onclick="selectUploader('', '{% trans 'All Uploaders' %}')">
+                                    <span>{% trans "All Uploaders" %}</span>
+                                </a>
+                                {% for u in uploaders %}
+                                <a class="row padding hover pointer align-center" onclick="selectUploader('{{ u.username }}', '{{ u.username }}')">
+                                    {% if u.avatar %}
+                                    <img src="{{ u.avatar.url }}" class="circle tiny margin-right">
+                                    {% else %}
+                                    <i class="tiny circle surface margin-right">person</i>
+                                    {% endif %}
+                                    <span>{{ u.username }}</span>
+                                </a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <input type="hidden" name="uploader" id="uploader-hidden" value="{{ request.GET.uploader|default:'' }}">
+                    </div>
+
+                    <div class="s12 m6 l3">
+                         <div class="field label border round">
+                            <select name="tag">
+                                <option value="">{% trans "All Tags" %}</option>
+                                {% for t in tags %}
+                                <option value="{{ t.name }}" {% if request.GET.tag == t.name %}selected{% endif %}>{{ t.name }}</option>
+                                {% endfor %}
+                            </select>
+                            <label>{% trans "Tag" %}</label>
+                        </div>
+                    </div>
+
+                    <div class="s12 m6 l3">
+                        <div class="field label border round">
+                           <select name="sort">
+                               <option value="date_desc" {% if request.GET.sort == 'date_desc' %}selected{% endif %}>{% trans "Newest" %}</option>
+                               <option value="date_asc" {% if request.GET.sort == 'date_asc' %}selected{% endif %}>{% trans "Oldest" %}</option>
+                               <option value="rating" {% if request.GET.sort == 'rating' %}selected{% endif %}>{% trans "Highest Rated" %}</option>
+                               <option value="user" {% if request.GET.sort == 'user' %}selected{% endif %}>{% trans "Uploader (A-Z)" %}</option>
+                           </select>
+                           <label>{% trans "Sort By" %}</label>
+                       </div>
+                   </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

sandwitches/templates/components/footer.html

@@ -0,0 +1,14 @@
+<footer class="fixed bottom primary-container">
+    <div class="row align-center">
+        <div class="max">
+            <h6 class="small">Sandwitches</h6>
+            <div class="small-text">© {% now "Y" %} Sandwitches Inc.</div>
+        </div>
+        <nav>
+            version {{ version }}
+            <a href="https://github.com/martynvdijke/sandwitches" target="_blank" class="circle transparent">
+                <i>code</i>
+            </a>
+        </nav>
+    </div>
+</footer>

sandwitches/templates/components/ingredients_scripts.html

@@ -0,0 +1,50 @@
+{% load i18n static %}
+
+<script>
+    async function scaleIngredients() {
+        const portionsInput = document.getElementById('portions');
+        const ingredientsDisplay = document.getElementById('ingredients-display');
+        const selector = document.querySelector('.portion-selector');
+
+        if (!portionsInput || !ingredientsDisplay || !selector) return;
+
+        const recipeId = selector.dataset.recipeId;
+        const targetServings = portionsInput.value;
+
+        ingredientsDisplay.innerHTML = '<div class="center-align padding"><progress class="circle"></progress></div>';
+
+        try {
+            const url = `/api/v1/recipes/${recipeId}/scale-ingredients?target_servings=${targetServings}`;
+            console.log("Fetching:", url);
+            const response = await fetch(url);
+
+            if (!response.ok) throw new Error(`Status: ${response.status}`);
+
+            const data = await response.json();
+
+            let html = '<div class="padding">';
+            data.forEach(item => {
+                html += `<div class="mb-1">${item.scaled_line}</div>`;
+            });
+            html += '</div>';
+            ingredientsDisplay.innerHTML = html;
+        } catch (e) {
+            console.error("Scaling failed:", e);
+            ingredientsDisplay.innerHTML = `<div class="padding error-text">{% trans "Error scaling ingredients:" %} ${e.message}</div>`;
+        }
+    }
+
+    function adjustPortions(delta) {
+        const input = document.getElementById('portions');
+        if (!input) return;
+        let val = parseInt(input.value) || 1;
+        val += delta;
+        if (val < 1) val = 1;
+        input.value = val;
+        scaleIngredients();
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        scaleIngredients();
+    });
+</script>

sandwitches/templates/components/ingredients_section.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+<h5 class="primary-text">{% trans "Ingredients" %}</h5>
+<div class="portion-selector" data-recipe-id="{{ recipe.id }}" data-original-servings="{{ recipe.servings }}">
+    <label for="portions">{% trans "Portions" %}:</label>
+    <button class="button circle transparent" onclick="adjustPortions(-1)">-</button>
+    <input type="number" id="portions" value="{{ recipe.servings }}" min="1" onchange="scaleIngredients()">
+    <button class="button circle transparent" onclick="adjustPortions(1)">+</button>
+</div>
+ <div id="ingredients-display" class="card padding flat gray1">
+  <p class="text-center">{% trans "Loading ingredients..." %}</p>
+ </div>

sandwitches/templates/components/instructions_section.html

@@ -0,0 +1,9 @@
+{% load i18n markdown_extras %}
+<h5 class="primary-text">{% trans "Instructions" %}</h5>
+<div>
+  {% if recipe.instructions %}
+      {{ recipe.instructions|convert_markdown|safe }}
+  {% else %}
+      <p class="italic">{% trans "No instructions yet." %}</p>
+  {% endif %}
+</div>

sandwitches/templates/components/language_dialog.html

@@ -0,0 +1,26 @@
+{% load i18n %}
+<dialog id="language-menu">
+    <form method="post" action="{% url 'set_language' %}">
+        {% csrf_token %}
+        <h5 class="center-align">{% trans "Select Language" %}</h5>
+        <div class="grid center-align">
+            {% get_current_language as LANGUAGE_CODE %}
+            {% get_available_languages as LANGUAGES %}
+            {% for code, name in LANGUAGES %}
+            <div class="s6">
+                <button type="submit" name="language" value="{{ code }}" class="circle large {% if code == LANGUAGE_CODE %}primary{% else %}surface{% endif %}">
+                    <span style="font-size: 2rem;">
+                        {% if code == 'en' %}🇬🇧{% elif code == 'nl' %}🇳🇱{% else %}🌐{% endif %}
+                    </span>
+                </button>
+                <div class="small-text">{{ name }}</div>
+            </div>
+            {% endfor %}
+        </div>
+        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
+    </form>
+    <div class="space"></div>
+    <nav class="center-align">
+        <button class="transparent link" data-ui="#language-menu">{% trans "Close" %}</button>
+    </nav>
+</dialog>