orion/app/templates/shared/macros/language_selector.html

{#
  Language Selector Macros
  ========================
  Reusable language selector components for store dashboard and storefront.

  Usage:
    {% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact %}

    Full language selector with labels:
    language_selector(current_language='fr', enabled_languages=['fr', 'de', 'en'], position='right')

    Compact selector (flag only):
    language_selector_compact(current_language='fr', enabled_languages=['fr', 'de', 'en'])
#}


{#
  Language configuration - matches app/utils/i18n.py
  Uses native language names per LANG-005 architecture rule
#}
{% set LANGUAGE_NAMES = {
    'en': 'English',
    'fr': 'Français',
    'de': 'Deutsch',
    'lb': 'Lëtzebuergesch'
} %}

{% set LANGUAGE_NATIVE = {
    'en': 'English',
    'fr': 'Français',
    'de': 'Deutsch',
    'lb': 'Lëtzebuergesch'
} %}

{% set LANGUAGE_FLAGS = {
    'en': 'gb',
    'fr': 'fr',
    'de': 'de',
    'lb': 'lu'
} %}


{#
  Language Selector (Full)
  ========================
  A dropdown language selector showing flag and language name.

  Parameters:
    - current_language: Current language code (default: 'fr')
    - enabled_languages: List of enabled language codes (default: all)
    - position: 'left' | 'right' (default: 'right')
    - context: 'store' | 'shop' | 'admin' (affects API endpoint)
    - show_label: Show language name next to flag (default: true)
#}
{% macro language_selector(current_language='fr', enabled_languages=none, position='right', context='shop', show_label=true) %}
{% set langs = enabled_languages or ['en', 'fr', 'de', 'lb'] %}
{% set current = current_language if current_language in langs else langs[0] %}
{% set positions = {'left': 'left-0', 'right': 'right-0'} %}
{# Uses languageSelector() function per LANG-002 architecture rule #}
{# Use single quotes for x-data so JSON double quotes don't break the attribute #}
<div
    x-data='languageSelector("{{ current }}", {{ langs | tojson }})'
    class="relative inline-block"
>
    <button
        @click="isLangOpen = !isLangOpen"
        @click.outside="isLangOpen = false"
        type="button"
        class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors"
        :class="{ 'ring-2 ring-purple-500 ring-offset-2': isLangOpen }"
    >
        <span class="fi" :class="'fi-' + languageFlags[currentLang]"></span>
        {% if show_label %}
        <span x-text="languageNames[currentLang]" class="hidden sm:inline"></span>
        {% endif %}
        <span x-html="$icon('chevron-down', 'w-4 h-4')" :class="{ 'rotate-180': isLangOpen }" class="transition-transform"></span>
    </button>

    <div
        x-show="isLangOpen"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="absolute z-50 mt-2 w-44 {{ positions[position] }} bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1"
    >
        <template x-for="lang in languages" :key="lang">
            <button
                @click="setLanguage(lang)"
                type="button"
                class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
                :class="currentLang === lang
                    ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
            >
                <span class="fi" :class="'fi-' + languageFlags[lang]"></span>
                <span x-text="languageNames[lang]"></span>
                <span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
            </button>
        </template>
    </div>
</div>
{% endmacro %}


{#
  Language Selector (Compact)
  ===========================
  A compact language selector showing only flag icon.
  Good for headers with limited space.

  Parameters:
    - current_language: Current language code (default: 'fr')
    - enabled_languages: List of enabled language codes (default: all)
    - position: 'left' | 'right' (default: 'right')
#}
{% macro language_selector_compact(current_language='fr', enabled_languages=none, position='right') %}
{% set langs = enabled_languages or ['en', 'fr', 'de', 'lb'] %}
{% set current = current_language if current_language in langs else langs[0] %}
{% set positions = {'left': 'left-0', 'right': 'right-0'} %}
{# Uses languageSelector() function per LANG-002 architecture rule #}
{# Use single quotes for x-data so JSON double quotes don't break the attribute #}
<div
    x-data='languageSelector("{{ current }}", {{ langs | tojson }})'
    class="relative"
>
    <button
        @click="isLangOpen = !isLangOpen"
        @click.outside="isLangOpen = false"
        type="button"
        class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors focus:outline-none"
        :class="{ 'text-gray-700 dark:text-white bg-gray-100 dark:bg-gray-700': isLangOpen }"
        title="Change language"
    >
        <span class="fi text-lg" :class="'fi-' + languageFlags[currentLang]"></span>
    </button>

    <div
        x-show="isLangOpen"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="absolute z-50 mt-1 w-44 {{ positions[position] }} bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1"
    >
        <template x-for="lang in languages" :key="lang">
            <button
                @click="setLanguage(lang)"
                type="button"
                class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
                :class="currentLang === lang
                    ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
            >
                <span class="fi" :class="'fi-' + languageFlags[lang]"></span>
                <span x-text="languageNames[lang]"></span>
                <span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
            </button>
        </template>
    </div>
</div>
{% endmacro %}


{#
  Language Toggle (Simple)
  ========================
  A simple language toggle for when only 2 languages are enabled.
  Shows both flags side by side.

  Parameters:
    - current_language: Current language code
    - enabled_languages: List of exactly 2 language codes
#}
{% macro language_toggle(current_language='fr', enabled_languages=['fr', 'de']) %}
{% set langs = enabled_languages[:2] if enabled_languages else ['fr', 'de'] %}
{% set current = current_language if current_language in langs else langs[0] %}
{# Uses languageSelector() function per LANG-002 architecture rule #}
{# Use single quotes for x-data so JSON double quotes don't break the attribute #}
<div
    x-data='languageSelector("{{ current }}", {{ langs | tojson }})'
    class="inline-flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg"
>
    <template x-for="lang in languages" :key="lang">
        <button
            @click="setLanguage(lang)"
            type="button"
            class="p-1.5 rounded transition-all"
            :class="currentLang === lang
                ? 'bg-white dark:bg-gray-600 shadow-sm'
                : 'hover:bg-gray-200 dark:hover:bg-gray-600'"
            :title="lang.toUpperCase()"
        >
            <span class="fi" :class="'fi-' + languageFlags[lang]"></span>
        </button>
    </template>
</div>
{% endmacro %}


{#
  Language Settings Form
  ======================
  A form for store/admin settings page to configure language preferences.

  Parameters:
    - current_settings: Dict with current store language settings
    - form_id: Form ID for submission
#}
{% macro language_settings_form(current_settings=none, form_id='language-settings-form') %}
{% set settings = current_settings or {} %}
{# Native language names per LANG-005 #}
{% set all_languages = [
    {'code': 'en', 'name': 'English'},
    {'code': 'fr', 'name': 'Français'},
    {'code': 'de', 'name': 'Deutsch'},
    {'code': 'lb', 'name': 'Lëtzebuergesch'}
] %}
<div
    x-data="{
        defaultLanguage: '{{ settings.get('default_language', 'fr') }}',
        dashboardLanguage: '{{ settings.get('dashboard_language', 'fr') }}',
        storefrontLanguage: '{{ settings.get('storefront_language', 'fr') }}',
        storefrontLanguages: {{ settings.get('storefront_languages', ['fr', 'de', 'en']) | tojson }},
        allLanguages: {{ all_languages | tojson }},
        toggleStorefrontLanguage(code) {
            const index = this.storefrontLanguages.indexOf(code);
            if (index > -1) {
                // Don't allow removing if it's the only one or if it's the default
                if (this.storefrontLanguages.length > 1 && code !== this.storefrontLanguage) {
                    this.storefrontLanguages.splice(index, 1);
                }
            } else {
                this.storefrontLanguages.push(code);
            }
        },
        isStorefrontLanguageEnabled(code) {
            return this.storefrontLanguages.includes(code);
        }
    }"
    class="space-y-6"
>
    {# Default Content Language #}
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Default Content Language
        </label>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            Language used as fallback when content is not available in the requested language.
        </p>
        <select
            x-model="defaultLanguage"
            name="default_language"
            class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
        >
            <template x-for="lang in allLanguages" :key="lang.code">
                <option :value="lang.code" x-text="lang.name" :selected="lang.code === defaultLanguage"></option>
            </template>
        </select>
    </div>

    {# Dashboard Language #}
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Dashboard Language
        </label>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            Default language for your store dashboard (team members can override in their profile).
        </p>
        <select
            x-model="dashboardLanguage"
            name="dashboard_language"
            class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
        >
            <template x-for="lang in allLanguages" :key="lang.code">
                <option :value="lang.code" x-text="lang.name" :selected="lang.code === dashboardLanguage"></option>
            </template>
        </select>
    </div>

    {# Storefront Default Language #}
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Storefront Default Language
        </label>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            Default language shown to customers when they first visit your store.
        </p>
        <select
            x-model="storefrontLanguage"
            name="storefront_language"
            class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
        >
            <template x-for="lang in allLanguages.filter(l => storefrontLanguages.includes(l.code))" :key="lang.code">
                <option :value="lang.code" x-text="lang.name" :selected="lang.code === storefrontLanguage"></option>
            </template>
        </select>
    </div>

    {# Enabled Storefront Languages #}
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Enabled Storefront Languages
        </label>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            Languages available to customers in the language selector.
        </p>
        <div class="space-y-2">
            <template x-for="lang in allLanguages" :key="lang.code">
                <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                    <input
                        type="checkbox"
                        :value="lang.code"
                        :checked="isStorefrontLanguageEnabled(lang.code)"
                        @change="toggleStorefrontLanguage(lang.code)"
                        :disabled="lang.code === storefrontLanguage"
                        class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 disabled:opacity-50"
                    >
                    <span class="fi" :class="'fi-' + (lang.code === 'en' ? 'gb' : lang.code === 'lb' ? 'lu' : lang.code)"></span>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="lang.name"></span>
                    <span x-show="lang.code === storefrontLanguage" class="text-xs text-purple-600 dark:text-purple-400">(default)</span>
                </label>
            </template>
        </div>
        <input type="hidden" name="storefront_languages" :value="JSON.stringify(storefrontLanguages)">
    </div>
</div>
{% endmacro %}