<%!-- 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

Configure and manage language module

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

Languages

Enable language module for your application

<%!-- Languages Management Section (always show to allow adding languages) --%>
<%= if @in_configured_mode do %>

Language Configuration

Manage your configured languages

<% else %>

Add Your First Language

Select a language to begin configuration

<% end %>
<%!-- Add Language Dropdown (always show) --%> <%= if not Enum.empty?(@available_languages_for_selection) do %>
<% end %> <%!-- Languages List (always show) --%>
<%= for {language, index} <- Enum.with_index(@languages) do %>
{get_language_flag(language["code"])}
{language["name"]} {language["code"]} <%= if language["is_default"] do %> Default <% end %>
<%!-- Move buttons only in configured mode --%> <%= if @in_configured_mode do %>
<% end %>
<%!-- Enable/Disable Toggle --%>
<%!-- Set Default Button (only in configured mode, and not the default language) --%> <%= if @in_configured_mode and not language["is_default"] do %> <% end %> <%!-- Remove Button (only in configured mode, and not the default language) --%> <%= if @in_configured_mode and not language["is_default"] do %> <% end %>
<% end %>
<%!-- Help Section (only when in configured mode) --%> <%= if @in_configured_mode do %>

Language Configuration

• Use standard language codes like 'en', 'es', 'fr', or 'zh-CN' for regions

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

• Use the arrow buttons to reorder languages in the list

• At least one language must remain configured at all times

<% end %> <%!-- 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 Language Names Toggle --%>
<%!-- Go to Home Page Toggle --%>
<%!-- Hide Current Language Toggle --%>
<%!-- 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} _language_update_key={@language_count} />
<%!-- Generated Code --%>

Generated Code

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

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 %>