<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Emails"
  current_path={@current_path}
  project_title={@project_title}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Settings
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">Emails Settings</h1>
        <p class="text-lg text-base-content">
          Configure emails behavior and data retention
        </p>
      </div>
    </header>

    <%!-- Main Content --%>
    <div class="max-w-4xl mx-auto space-y-8">
      <%!-- Status Card --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-2xl mb-4">
            <.icon name="hero-cog-6-tooth" class="w-6 h-6" /> Status
          </h2>

          <div class="form-control">
            <label class="label cursor-pointer">
              <span class="label-text text-lg">
                <span class="font-semibold">Enable Emails</span>
                <div class="text-sm text-base-content/70 mt-1">
                  Track email delivery, opens, clicks, and other events
                </div>
              </span>
              <input
                type="checkbox"
                class="toggle toggle-primary"
                checked={@email_enabled}
                phx-click="toggle_emails"
              />
            </label>
          </div>
        </div>
      </div>

      <%= if @email_enabled do %>
        <%!-- Sender Configuration Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-envelope" class="w-6 h-6" /> Sender Configuration
            </h2>

            <form phx-submit="save_sender_settings">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <%!-- From Email --%>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text font-medium">From Email</span>
                  </label>
                  <input
                    name="sender[from_email]"
                    type="email"
                    placeholder="noreply@example.com"
                    value={@sender_settings.from_email}
                    class="input input-bordered focus:input-primary"
                    required
                  />
                  <label class="label">
                    <span class="label-text-alt">
                      Email address used as sender for all outgoing emails
                    </span>
                  </label>
                </div>

                <%!-- From Name --%>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text font-medium">From Name</span>
                  </label>
                  <input
                    name="sender[from_name]"
                    type="text"
                    placeholder="My Application"
                    value={@sender_settings.from_name}
                    class="input input-bordered focus:input-primary"
                    required
                  />
                  <label class="label">
                    <span class="label-text-alt">Sender name displayed to recipients</span>
                  </label>
                </div>
              </div>

              <%!-- Preview --%>
              <div class="alert alert-info mb-4">
                <.icon name="hero-information-circle" class="w-5 h-5" />
                <div>
                  <h3 class="font-bold">Preview</h3>
                  <p class="text-sm mt-1">
                    Emails will appear as:
                    <strong>
                      {@sender_settings.from_name} &lt;{@sender_settings.from_email}&gt;
                    </strong>
                  </p>
                </div>
              </div>

              <%!-- Save Button --%>
              <div class="card-actions justify-end">
                <button
                  type="submit"
                  class={[
                    "btn btn-primary",
                    if(@saving_sender, do: "loading", else: "")
                  ]}
                  disabled={@saving_sender}
                >
                  <%= if @saving_sender do %>
                    Saving...
                  <% else %>
                    <.icon name="hero-check" class="w-4 h-4 mr-2" /> Save Sender Settings
                  <% end %>
                </button>
              </div>
            </form>
          </div>
        </div>

        <%!-- Options Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> Options
            </h2>

            <%!-- Save Email Bodies --%>
            <div class="form-control mb-4">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">Save Email Bodies</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    Store the full content of sent emails for debugging and analysis
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-secondary"
                  checked={@email_save_body}
                  phx-click="toggle_email_save_body"
                />
              </label>
            </div>

            <div class="divider"></div>

            <%!-- Save Email Headers --%>
            <div class="form-control mb-4">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">Save Email Headers</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    Store email headers for debugging and analysis (increases storage usage)
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-secondary"
                  checked={@email_save_headers}
                  phx-click="toggle_email_save_headers"
                />
              </label>
            </div>

            <div class="divider"></div>

            <%!-- AWS SES Events --%>
            <div class="form-control mb-4">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">AWS SES Events Options</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    Track delivery, bounce, and complaint events from Amazon SES
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-accent"
                  checked={@email_ses_events}
                  phx-click="toggle_email_ses_events"
                />
              </label>
            </div>

            <div class="divider"></div>

            <%!-- Sampling Rate --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text text-lg font-semibold">Emails Sampling Rate</span>
              </label>
              <div class="input-group">
                <input
                  name="sampling_rate"
                  type="number"
                  placeholder="Enter sampling rate"
                  class="input input-bordered w-full max-w-xs"
                  value={@email_sampling_rate}
                  min="0"
                  max="100"
                  phx-blur="update_email_sampling_rate"
                />
                <span class="bg-base-200 px-4 py-3 text-sm">%</span>
              </div>
              <label class="label">
                <span class="label-text-alt text-base-content/70">
                  Percentage of emails to fully track for analytics (0-100%)
                </span>
              </label>
            </div>
          </div>
        </div>

        <%!-- Data Retention Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-archive-box" class="w-6 h-6" /> Data Retention
            </h2>

            <div class="form-control">
              <label class="label">
                <span class="label-text text-lg font-semibold">Email Retention Period</span>
              </label>
              <div class="flex gap-2 items-start">
                <div class="input-group flex-1">
                  <input
                    name="retention_days"
                    type="number"
                    placeholder="Enter retention days"
                    class="input input-bordered w-full max-w-xs"
                    value={@email_retention_days}
                    min="1"
                    max="365"
                    phx-blur="update_email_retention"
                  />
                  <span class="bg-base-200 px-4 py-3 text-sm">days</span>
                </div>
                <button
                  type="button"
                  phx-click="run_cleanup_now"
                  class={[
                    "btn btn-warning btn-sm",
                    if(assigns[:running_cleanup], do: "loading", else: "")
                  ]}
                  disabled={assigns[:running_cleanup]}
                >
                  <%= if assigns[:running_cleanup] do %>
                    Running...
                  <% else %>
                    <.icon name="hero-trash" class="w-4 h-4 mr-1" /> Run Cleanup Now
                  <% end %>
                </button>
              </div>
              <label class="label">
                <span class="label-text-alt text-base-content/70">
                  How long to keep emails data before automatic cleanup (1-365 days)
                </span>
              </label>
            </div>

            <div class="divider"></div>

            <%= if @email_save_body do %>
              <%!-- Compress Body After Days --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text text-lg font-semibold">
                    Compress Email Bodies After
                  </span>
                  <span class="label-text-alt text-base-content/70">
                    Auto-saves when you click outside the input field
                  </span>
                </label>
                <div class="flex gap-2 items-start">
                  <div class="input-group flex-1">
                    <input
                      name="compress_days"
                      type="number"
                      placeholder="Enter compression days"
                      class={[
                        "input input-bordered w-full max-w-xs",
                        "transition-colors duration-200",
                        "focus:input-primary",
                        if(assigns[:updating_compress_days],
                          do: "input-warning loading",
                          else: ""
                        )
                      ]}
                      value={@email_compress_body}
                      min="7"
                      max="365"
                      phx-blur="update_compress_days"
                      phx-focus="set_compress_days_focused"
                      phx-keydown="set_compress_days_changed"
                    />
                    <span class="bg-base-200 px-4 py-3 text-sm">days</span>
                  </div>
                  <button
                    type="button"
                    phx-click="run_compression_now"
                    class={[
                      "btn btn-info btn-sm",
                      if(assigns[:running_compression], do: "loading", else: "")
                    ]}
                    disabled={assigns[:running_compression]}
                  >
                    <%= if assigns[:running_compression] do %>
                      Compressing...
                    <% else %>
                      <.icon name="hero-archive-box-arrow-down" class="w-4 h-4 mr-1" />
                      Compress Now
                    <% end %>
                  </button>
                </div>
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    <span class="flex items-center gap-1">
                      <.icon name="hero-information-circle" class="w-3 h-3" />
                      Compress old email bodies to save storage space (7-365 days).
                      Changes are saved automatically.
                    </span>
                  </span>
                </label>
              </div>

              <div class="divider"></div>
            <% end %>

            <%!-- S3 Archival Toggle --%>
            <div class="form-control mb-4">
              <label class="label cursor-pointer">
                <span class="label-text text-lg">
                  <span class="font-semibold">Enable S3 Archival</span>
                  <div class="text-sm text-base-content/70 mt-1">
                    Move old email data to AWS S3 for long-term cold storage
                  </div>
                </span>
                <input
                  type="checkbox"
                  class="toggle toggle-warning"
                  checked={@email_archive_to_s3}
                  phx-click="toggle_s3_archival"
                />
              </label>
            </div>

            <%= if @email_archive_to_s3 do %>
              <%!-- S3 Archival Action Button --%>
              <div class="form-control mt-2">
                <div class="flex gap-2 items-start">
                  <div class="flex-1">
                    <span class="text-sm text-base-content/70">
                      Manually trigger S3 archival for emails older than retention period
                    </span>
                  </div>
                  <button
                    type="button"
                    phx-click="run_s3_archival_now"
                    class={[
                      "btn btn-warning btn-sm",
                      if(assigns[:running_archival], do: "loading", else: "")
                    ]}
                    disabled={assigns[:running_archival]}
                  >
                    <%= if assigns[:running_archival] do %>
                      Archiving...
                    <% else %>
                      <.icon name="hero-cloud-arrow-up" class="w-4 h-4 mr-1" /> Archive to S3 Now
                    <% end %>
                  </button>
                </div>
              </div>
            <% end %>

            <div class="alert alert-warning mt-4">
              <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
              <div>
                <h3 class="font-bold">Data Privacy Notice</h3>
                <p class="text-sm mt-1">
                  Email data will be automatically deleted after the retention period expires.
                  This helps maintain privacy compliance and reduces storage requirements.
                </p>
              </div>
            </div>
          </div>
        </div>

        <%!-- AWS Configuration Card --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-cog-6-tooth" class="w-6 h-6" /> AWS Configuration
            </h2>

            <div class="alert alert-info mb-6">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <div class="flex-1">
                <h3 class="font-bold">Configure AWS Infrastructure</h3>
                <p class="text-sm mt-1">
                  Set up AWS credentials, SNS topics, and SQS queues for advanced emails.
                </p>
              </div>
              <button
                type="button"
                phx-click="setup_aws_infrastructure"
                class={[
                  "btn btn-accent btn-sm",
                  if(@setting_up_aws, do: "loading", else: "")
                ]}
                disabled={@setting_up_aws}
              >
                <%= if @setting_up_aws do %>
                  Setting up...
                <% else %>
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Setup AWS Infrastructure
                <% end %>
              </button>
            </div>

            <form phx-submit="save_aws_settings">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <%!-- AWS Access Key ID --%>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text font-medium">AWS Access Key ID</span>
                  </label>
                  <input
                    name="aws_settings[access_key_id]"
                    type="text"
                    placeholder="AKIA..."
                    value={@aws_settings.access_key_id}
                    class="input input-bordered focus:input-primary"
                  />
                  <label class="label">
                    <span class="label-text-alt">Your AWS access key for SQS access</span>
                  </label>
                </div>

                <%!-- AWS Secret Access Key --%>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text font-medium">AWS Secret Access Key</span>
                  </label>
                  <input
                    name="aws_settings[secret_access_key]"
                    type="password"
                    placeholder="******************"
                    value={@aws_settings.secret_access_key}
                    class="input input-bordered focus:input-primary"
                  />
                  <label class="label">
                    <span class="label-text-alt">Hidden for security</span>
                  </label>
                </div>

                <%!-- AWS Region --%>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text font-medium">AWS Region</span>
                  </label>
                  <input
                    name="aws_settings[region]"
                    type="text"
                    placeholder="  #eu-north-1"
                    value={@aws_settings.region}
                    class="input input-bordered focus:input-primary"
                  />
                  <label class="label">
                    <span class="label-text-alt">AWS region for your services</span>
                  </label>
                </div>
              </div>

              <%= if @email_ses_events do %>
                <%!-- SES/SQS Settings (only when SES Events enabled) --%>
                <div class="divider">AWS SES & SQS Settings</div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <%!-- SES Configuration Set --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text font-medium">SES Configuration Set</span>
                    </label>
                    <input
                      name="aws_settings[ses_configuration_set]"
                      type="text"
                      placeholder="phoenixkit-emails"
                      value={@aws_settings.ses_configuration_set}
                      class="input input-bordered focus:input-primary"
                    />
                    <label class="label">
                      <span class="label-text-alt">SES configuration set name</span>
                    </label>
                  </div>

                  <%!-- SQS Polling Interval --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text font-medium">SQS Polling Interval</span>
                    </label>
                    <div class="input-group">
                      <input
                        name="aws_settings[sqs_polling_interval_ms]"
                        type="number"
                        placeholder="5000"
                        value={@aws_settings.sqs_polling_interval_ms}
                        class="input input-bordered focus:input-primary w-full max-w-xs"
                        min="1000"
                        max="60000"
                      />
                      <span class="bg-base-200 px-4 py-3 text-sm">ms</span>
                    </div>
                    <label class="label">
                      <span class="label-text-alt">
                        How often to check for SQS messages (1-60 seconds)
                      </span>
                    </label>
                  </div>

                  <%!-- SNS Topic ARN --%>
                  <div class="form-control md:col-span-2">
                    <label class="label">
                      <span class="label-text font-medium">SNS Topic ARN</span>
                    </label>
                    <input
                      name="aws_settings[sns_topic_arn]"
                      type="text"
                      placeholder="arn:aws:sns:eu-north-1:123456789012:email-events"
                      value={@aws_settings.sns_topic_arn}
                      class="input input-bordered focus:input-primary"
                    />
                    <label class="label">
                      <span class="label-text-alt">SNS topic for email events</span>
                    </label>
                  </div>

                  <%!-- SQS Queue URL --%>
                  <div class="form-control md:col-span-2">
                    <label class="label">
                      <span class="label-text font-medium">SQS Queue URL</span>
                    </label>
                    <input
                      name="aws_settings[sqs_queue_url]"
                      type="url"
                      placeholder="https://sqs.eu-north-1.amazonaws.com/123456789012/email-events"
                      value={@aws_settings.sqs_queue_url}
                      class="input input-bordered focus:input-primary"
                    />
                    <label class="label">
                      <span class="label-text-alt">Main queue for email events</span>
                    </label>
                  </div>

                  <%!-- SQS Queue ARN --%>
                  <div class="form-control md:col-span-1">
                    <label class="label">
                      <span class="label-text font-medium">SQS Queue ARN</span>
                    </label>
                    <input
                      name="aws_settings[sqs_queue_arn]"
                      type="text"
                      placeholder="arn:aws:sqs:eu-north-1:123456789012:email-events"
                      value={@aws_settings.sqs_queue_arn}
                      class="input input-bordered focus:input-primary"
                    />
                    <label class="label">
                      <span class="label-text-alt">SQS queue ARN for permissions</span>
                    </label>
                  </div>

                  <%!-- SQS DLQ URL --%>
                  <div class="form-control md:col-span-1">
                    <label class="label">
                      <span class="label-text font-medium">SQS Dead Letter Queue URL</span>
                    </label>
                    <input
                      name="aws_settings[sqs_dlq_url]"
                      type="url"
                      placeholder="https://sqs.eu-north-1.amazonaws.com/123456789012/email-events-dlq"
                      value={@aws_settings.sqs_dlq_url}
                      class="input input-bordered focus:input-primary"
                    />
                    <label class="label">
                      <span class="label-text-alt">Dead letter queue for failed messages</span>
                    </label>
                  </div>
                </div>

                <%!-- SQS Worker Options --%>
                <div class="divider">SQS Worker Settings</div>

                <div class="form-control mb-4">
                  <label class="label cursor-pointer">
                    <span class="label-text text-lg">
                      <span class="font-semibold">Enable SQS Polling</span>
                      <div class="text-sm text-base-content/70 mt-1">
                        Automatically poll SQS queue for email events in background
                      </div>
                    </span>
                    <input
                      type="checkbox"
                      class="toggle toggle-info"
                      checked={@sqs_polling_enabled}
                      phx-click="toggle_sqs_polling"
                    />
                  </label>
                </div>

                <%= if @sqs_polling_enabled do %>
                  <div class="divider"></div>

                  <%!-- SQS Max Messages Per Poll --%>
                  <div class="form-control mb-4">
                    <label class="label">
                      <span class="label-text text-lg font-semibold">Max Messages Per Poll</span>
                    </label>
                    <div class="input-group">
                      <input
                        name="max_messages"
                        type="number"
                        placeholder="Enter max messages"
                        class="input input-bordered w-full max-w-xs"
                        value={@sqs_max_messages_per_poll}
                        min="1"
                        max="10"
                        phx-blur="update_max_messages"
                      />
                      <span class="bg-base-200 px-4 py-3 text-sm">messages</span>
                    </div>
                    <label class="label">
                      <span class="label-text-alt text-base-content/70">
                        Maximum number of messages to process in each polling cycle (1-10)
                      </span>
                    </label>
                  </div>

                  <%!-- SQS Visibility Timeout --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text text-lg font-semibold">Visibility Timeout</span>
                    </label>
                    <div class="input-group">
                      <input
                        name="timeout"
                        type="number"
                        placeholder="Enter timeout"
                        class="input input-bordered w-full max-w-xs"
                        value={@sqs_visibility_timeout}
                        min="30"
                        max="43200"
                        phx-blur="update_visibility_timeout"
                      />
                      <span class="bg-base-200 px-4 py-3 text-sm">seconds</span>
                    </div>
                    <label class="label">
                      <span class="label-text-alt text-base-content/70">
                        How long messages remain invisible after being received (30-43200 seconds)
                      </span>
                    </label>
                  </div>
                <% end %>
              <% else %>
                <%!-- Message when SES Events are disabled --%>
                <div class="alert alert-info mt-4">
                  <.icon name="hero-information-circle" class="w-5 h-5" />
                  <div>
                    <h3 class="font-bold">AWS SES Integration Disabled</h3>
                    <p class="text-sm mt-1">
                      Enable "AWS SES Events Options" above to access advanced SES and SQS configuration options.
                    </p>
                  </div>
                </div>
              <% end %>

              <%!-- Save Button --%>
              <div class="card-actions justify-end mt-6">
                <button
                  type="submit"
                  class={[
                    "btn btn-primary",
                    if(@saving, do: "loading", else: "")
                  ]}
                  disabled={@saving}
                >
                  <%= if @saving do %>
                    Saving...
                  <% else %>
                    <.icon name="hero-check" class="w-4 h-4 mr-2" /> Save AWS Settings
                  <% end %>
                </button>
              </div>
            </form>
          </div>
        </div>

        <%!-- Current Configuration Summary --%>
        <div class="alert alert-info">
          <.icon name="hero-information-circle" class="w-5 h-5" />
          <div>
            <h3 class="font-bold">Current Configuration</h3>
            <div class="text-sm mt-1">
              <p>Status: <span class="font-semibold">Enabled</span></p>
              <p>
                Save email bodies:
                <span class="font-semibold">
                  {if @email_save_body, do: "Yes", else: "No"}
                </span>
              </p>
              <p>
                AWS SES events:
                <span class="font-semibold">
                  {if @email_ses_events, do: "Yes", else: "No"}
                </span>
              </p>
              <p>
                Retention period: <span class="font-semibold">{@email_retention_days} days</span>
              </p>
              <p>
                Sampling rate: <span class="font-semibold">{@email_sampling_rate}%</span>
              </p>
              <p>
                SQS polling:
                <span class="font-semibold">
                  {if @sqs_polling_enabled, do: "Enabled", else: "Disabled"}
                </span>
              </p>
            </div>
          </div>
        </div>
      <% else %>
        <%!-- Disabled State Information --%>
        <div class="alert alert-warning">
          <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
          <div>
            <h3 class="font-bold">Emails Disabled</h3>
            <p class="text-sm mt-1">
              Enable the emails above to access configuration options and start managing email delivery events.
            </p>
          </div>
        </div>

        <%!-- Benefits Card when Disabled --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-light-bulb" class="w-6 h-6" /> Emails Benefits
            </h2>

            <div class="space-y-3">
              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">Delivery Monitoring</h3>
                  <p class="text-sm text-base-content/70">
                    Track successful email deliveries and identify issues
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">Engagement Analytics</h3>
                  <p class="text-sm text-base-content/70">
                    Monitor email opens, clicks, and user engagement
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">Debugging Support</h3>
                  <p class="text-sm text-base-content/70">
                    Store email content for troubleshooting delivery issues
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
                <div>
                  <h3 class="font-semibold">AWS SES Integration</h3>
                  <p class="text-sm text-base-content/70">
                    Automatic webhook handling for bounce and complaint events
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
