Refine shared header language selector

app/templates/_language_switch.html

@@ -1,4 +1,14 @@
-<nav class="language-switch" aria-label="{{ _('Sprache') }}">
-    {% set target_language = 'en' if language() == 'de' else 'de' %}
-    <a class="active" href="{{ language_url(target_language) }}" lang="{{ target_language }}" hreflang="{{ target_language }}" aria-label="{{ _('Zu Englisch wechseln') if target_language == 'en' else _('Zu Deutsch wechseln') }}" title="{{ _('Zu Englisch wechseln') if target_language == 'en' else _('Zu Deutsch wechseln') }}">{{ '🇬🇧' if target_language == 'en' else '🇩🇪' }}</a>
-</nav>
+<details class="language-switch">
+    <summary aria-label="{{ _('Sprache wechseln') }}: {{ language() | upper }}">
+        <span aria-hidden="true">🌐</span> <span>{{ language() | upper }}</span> <span class="language-caret" aria-hidden="true">▾</span>
+    </summary>
+    <nav class="language-panel" aria-label="{{ _('Sprache') }}">
+        <p class="language-heading"><span aria-hidden="true">🌐</span> {{ _('Sprache') }}</p>
+        {% for code, flag, label in [('de', '🇩🇪', 'Deutsch'), ('en', '🇬🇧', 'English')] %}
+        <a href="{{ language_url(code) }}" lang="{{ code }}" hreflang="{{ code }}"{% if language() == code %} aria-current="true"{% endif %}>
+            <span aria-hidden="true">{{ flag }}</span> <span>{{ label }}</span>{% if language() == code %}<span class="language-selected" aria-hidden="true">✓</span>{% endif %}
+        </a>
+        {% endfor %}
+    </nav>
+</details>
+<script src="/static/js/header-controls.js" defer></script>