<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/modules")} title="Languages" subtitle="Manage available languages for your application" /> <%!-- Summary Section --%>

{gettext("Summary")}

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

{gettext("Enabled Languages")}

{gettext( "Default" )} {gettext("Enabled")}
<%= if @show_reorder do %> <%!-- Draggable Reorder List --%> <.draggable_list id="language-reorder" items={Enum.filter(@languages, & &1.is_enabled)} item_id={& &1.code} on_reorder="reorder_languages" layout={:list} gap="gap-2" class="!flex-row flex-wrap" item_class="pk-sortable-wiggle" hide_source={true} > <:item :let={lang}>
{lang.name}
<% else %> <%!-- Static Badge List --%>
<%= for lang <- @languages |> Enum.filter(& &1.is_enabled) do %>
{lang.name}
    <%= if lang.code != @default_code do %>
    • <% else %>
  • {gettext("Default language")}
    • <% end %>
<% end %>
<% end %>
<%!-- Covered Countries List --%>

{gettext("Countries Covered")}

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

{gettext("No languages enabled yet.")}

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

{gettext("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 %> {gettext("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 --%>

{gettext("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 --%>

{gettext("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 --%>

{gettext("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 --%>

{gettext("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 --%>

{gettext("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 --%>

{gettext("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 %>

{gettext("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 %>