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

{@page_title}

<%= if @mode == :edit and @template do %> <% source_module = PhoenixKit.Modules.Emails.Template.get_source_module(@template) %>

Version {@template.version} • {String.capitalize(@template.category)} • {String.capitalize( source_module )} • {String.capitalize(@template.status)}

<% else %>

Create a new email template

<% end %>
<%!-- Main Editor Grid --%>
<%!-- Editor Panel --%>
<.form for={@changeset} as={:email_template} phx-change="validate" phx-submit="save" class="space-y-6" > <%!-- Basic Information --%>

Basic Information

<%= if error = Keyword.get(@changeset.errors, :name) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :display_name) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :slug) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :category) do %>
{elem(error, 0)}
<% end %>
<% current_metadata = Ecto.Changeset.get_field(@changeset, :metadata) || %{} %> <% current_source_module = Map.get(current_metadata, "source_module", "custom") %>
<%= if error = Keyword.get(@changeset.errors, :status) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :description) do %>
{elem(error, 0)}
<% end %>
<%!-- Email Content --%>

Email Content

<%= if error = Keyword.get(@changeset.errors, :subject) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :html_body) do %>
{elem(error, 0)}
<% end %>
<%= if error = Keyword.get(@changeset.errors, :text_body) do %>
{elem(error, 0)}
<% end %>
<%!-- Template Variables --%>

Template Variables

<%= if length(@extracted_variables) > 0 do %>
<.icon name="hero-information-circle" class="w-5 h-5" />
{length(@extracted_variables)} variable(s) detected and auto-added
Variables are automatically managed. Edit descriptions below or remove if not needed.
<%= for {name, description} <- Ecto.Changeset.get_field(@changeset, :variables) || %{} do %>
{"{{#{name}}}"}
<% end %>
<% else %>
<.icon name="hero-code-bracket" class="w-12 h-12 mx-auto mb-3 opacity-30" />
No variables found in template
Use {"{{variable_name}}"} syntax in subject or body to add dynamic variables.
Example: {"{{user_name}}"}, {"{{email}}"}, {"{{url}}"}
<% end %>
<%!-- Action Buttons --%>
<%!-- Test Send button (available in both new and edit modes) --%> <%!-- Save as Draft button (only in new mode) --%> <%= if @mode == :new do %> <% end %>
<.link navigate={Routes.path("/admin/modules/emails/templates")} class="btn btn-ghost" > Cancel
<%!-- Preview Panel --%>

Live Preview

<%!-- Subject Preview --%>
Subject:
{Ecto.Changeset.get_field(@changeset, :subject) || "No subject"}
<%!-- Body Preview --%>
<%= if @preview_mode == "html" do %> <%= case Ecto.Changeset.get_field(@changeset, :html_body) do %> <% html_content when is_binary(html_content) and html_content != "" -> %> <% _ -> %>
No HTML content
<% end %> <% else %>
<%= case Ecto.Changeset.get_field(@changeset, :text_body) do %> <% nil -> %>
No text content
<% "" -> %>
No text content
<% text_content -> %> {text_content} <% end %>
<% end %>
<%!-- Test Email Modal --%>

Send Test Email

<.form for={%{}} phx-submit="send_test" phx-change="validate_test" class="space-y-4" >
<%= if @test_form[:errors][:recipient] do %> <% end %>
<%= if length(@extracted_variables) > 0 do %>
<%= for variable <- @extracted_variables do %>
<% end %>
<% end %>
<.icon name="hero-information-circle" class="w-5 h-5" />
This will send a test email using the current template content with the sample variables provided above.