<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/modules")} title="Languages" subtitle="Manage available languages for your frontend language switcher" /> <%!-- Tabs --%>
<.link navigate={PhoenixKit.Utils.Routes.path("/admin/settings/languages/frontend")} class={"tab gap-2 #{if @active_tab == "frontend", do: "tab-active"}"} > Frontend <.link navigate={PhoenixKit.Utils.Routes.path("/admin/settings/languages/backend")} class={"tab gap-2 #{if @active_tab == "backend", do: "tab-active"}"} > Backend
<%= if @active_tab == "frontend" do %> <%!-- Summary Section --%>

Summary

<%!-- Stats Row --%>
Languages Enabled
{@enabled_count}
Countries Covered
{@covered_count}
<%= if @enabled_count > 0 do %> <%!-- Enabled Languages List --%>

Enabled Languages

Default Enabled
<%= for lang <- @languages |> Enum.filter(& &1.is_enabled) do %>
{lang.name}
    <%= if lang.code != @default_code do %>
    • <% else %>
  • Default language
    • <% end %>
<% 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 %>
<% end %>
<% 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 Language Names Toggle --%>
<%!-- Show Native 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} 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 %>
<% else %> <%!-- Backend Tab --%> <%!-- Admin Panel Languages Section --%>

Admin Panel Languages

Admin Panel Languages

Select which languages are available in the admin panel navbar language switcher. This is independent from the website's content languages.

<%!-- Currently Selected Languages --%>
<%= if Enum.empty?(@admin_languages) do %> No languages selected <% else %> <%= for language_code <- @admin_languages do %> <% language = PhoenixKit.Modules.Languages.get_predefined_language(language_code) %> <% language_flag = if language, do: language.flag, else: "🌐" %> <% language_name = if language, do: language.name, else: language_code %>
{language_flag} {language_name}
    <%= if length(@admin_languages) > 1 do %>
    • <% else %>
  • Last language
    • <% end %>
<% end %> <% end %>
<%!-- Add Language Dropdown --%>
<%!-- Save Button --%>
<% end %>