From b1a29710098b674204c5172afa18a07ff27d7180 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 13 Dec 2025 22:40:13 +0100
Subject: [PATCH] docs: add language selector macro to admin components
 showcase
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add language_selector.html to the Jinja Macros section with:
- Entry in Available Macro Files grid
- Live demo showing all three variants:
  - language_selector() - full dropdown with labels
  - language_selector_compact() - flag icon only
  - language_toggle() - toggle for 2 languages
- Code examples with copy functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/admin/components.html | 72 +++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html
index f6e844c6..a45c790a 100644
--- a/app/templates/admin/components.html
+++ b/app/templates/admin/components.html
@@ -1476,6 +1476,14 @@ html {
                             <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Specialized input components</p>
                             <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">search_autocomplete(), number_stepper()</code>
                         </div>
+                        <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                            <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
+                                <span x-html="$icon('translate', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
+                                language_selector.html
+                            </h4>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Language/i18n components</p>
+                            <code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">language_selector(), language_selector_compact(), language_toggle()</code>
+                        </div>
                     </div>
                 </div>
 
@@ -1576,6 +1584,70 @@ html {
                         Copy Code
                     </button>
                 </div>
+
+                <!-- Language Selector Component -->
+                <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Language Selector</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                        Language selector components for multi-language support. Use macros from <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">language_selector.html</code>. Supports dropdown, compact (icon-only), and toggle variants.
+                    </p>
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
+                        <!-- Live Demo -->
+                        <div class="space-y-6">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Full Selector (with labels)</label>
+                                {% from 'shared/macros/language_selector.html' import language_selector %}
+                                {{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='left') }}
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Compact Selector (flag only)</label>
+                                {% from 'shared/macros/language_selector.html' import language_selector_compact %}
+                                {{ language_selector_compact(current_language='de', enabled_languages=['en', 'fr', 'de'], position='left') }}
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Toggle (2 languages)</label>
+                                {% from 'shared/macros/language_selector.html' import language_toggle %}
+                                {{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
+                        <pre class="text-sm text-gray-100"><code>{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
+
+{# Full dropdown with labels #}
+{{ language_selector(
+    current_language='fr',
+    enabled_languages=['en', 'fr', 'de', 'lb'],
+    position='right'
+) }}
+
+{# Compact (flag icon only) - good for headers #}
+{{ language_selector_compact(
+    current_language='fr',
+    enabled_languages=['en', 'fr', 'de'],
+    position='right'
+) }}
+
+{# Toggle for 2 languages #}
+{{ language_toggle(
+    current_language='fr',
+    enabled_languages=['fr', 'de']
+) }}{% endraw %}</code></pre>
+                    </div>
+                    <button @click="copyCode(`{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
+
+{# Full dropdown with labels #}
+{{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='right') }}
+
+{# Compact (flag icon only) #}
+{{ language_selector_compact(current_language='fr', enabled_languages=['en', 'fr', 'de'], position='right') }}
+
+{# Toggle for 2 languages #}
+{{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
+                        <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
+                        Copy Code
+                    </button>
+                </div>
             </div>
         </section>