<%!-- Header Section --%>

<%!-- Back Button (Left aligned) --%> <.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules")} class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12" > Back to Modules <%!-- Title Section --%>

Languages

Manage available languages for your frontend language switcher

<%!-- System Toggle Section --%>

🌐

Languages

Enable language module for your application

<%!-- Summary Section --%>

Summary

<%!-- Stats Row --%>

Languages Enabled

{@enabled_count}

Countries Covered

{@covered_count}

<%= if @enabled_count > 0 do %> <%!-- Enabled Languages List --%>

Enabled Languages

<%= for lang <- @languages |> Enum.filter(& &1["is_enabled"]) do %> {lang["code"]} <% end %>

<%!-- Covered Countries List --%>

Countries Covered

<%= for {country, flag} <- @covered_countries do %> {flag} {country} <% end %>

<% else %>

No languages enabled yet.

<% end %>

<%!-- Languages Management Section --%>

Available Languages

Enable languages for your application ({@enabled_count} enabled)

<%!-- Search Input --%>

<%!-- Languages List grouped by Continent -> Country --%>

<%= for {continent, countries} <- filter_grouped_languages(@grouped_languages, @search_query) do %>

{continent} {count_covered_countries_in_continent(countries, @enabled_codes)}/{length( countries )} countries

<%= for {country, country_flag, languages} <- countries do %>

{country_flag} {country} {count_enabled(languages, @enabled_codes)}/{length(languages)}

<%= for language <- languages do %>

{language.native} ({language.name}) {language.code} <%= if language.code == @default_code do %> Default <% end %>

<%!-- Set Default Button (only for enabled, non-default languages) --%> <%= if language.code in @enabled_codes and language.code != @default_code do %> <% end %> <%!-- Enable/Disable Toggle --%>

<% end %>

<%!-- Help Section --%>

Language Configuration

• Toggle languages on/off to enable or disable them for your application

• The default language cannot be disabled and serves as the fallback

• Click "Set Default" on any enabled language to make it the default

<%!-- Frontend Language Switcher Component Section --%>

Frontend Language Switcher

Configure and preview the language switcher component for your frontend application.

<%= if @ml_enabled and length(@languages) >= 1 do %> <%!-- Two Column Layout: Settings | Preview --%>

<%!-- Left Column: Settings --%>

Switcher Settings

<%!-- Show Flags Toggle --%>

Show Flags

<%!-- Show Language Names Toggle --%>

Show Names

<%!-- Show Native Names Toggle --%>

Native Names

<%!-- Go to Home Page Toggle --%>

Go to Home

<%!-- Hide Current Language Toggle --%>

Hide Current

<%!-- Right Column: Preview and Code --%>

<%!-- Live Preview --%>

Live Preview

<.language_switcher_dropdown current_locale={@current_locale} show_flags={@switcher_show_flags} show_names={@switcher_show_names} show_native_names={@switcher_show_native_names} _language_update_key={@language_count} />

<%!-- Generated Code --%>

Generated Code

{generate_switcher_code(@switcher_show_flags, @switcher_show_names, @switcher_goto_home, @switcher_hide_current, @switcher_show_native_names)}

Copy this code to your frontend application and customize as needed.

<%!-- Implementation Instructions --%>

Implementation Notes

• Make sure @current_locale is available in your assigns

• The component automatically fetches enabled languages from the Language Module

• Only enabled languages will appear in the switcher

• Language switcher works with your existing route-based locale system

<% else %>

Enable and Configure Languages

<%= if not @ml_enabled do %> First, enable the Languages module using the toggle at the top, then add at least one language to see live previews of the language switcher component. <% else %> Add at least one language using the form above to see live previews of the language switcher component. <% end %>

<% end %>