<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} - SEO Settings"
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container mx-auto px-4 py-6 space-y-6">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/settings")}
      title={gettext("SEO Settings")}
      subtitle={
        gettext(
          "Configure environment-wide search optimization defaults and metadata directives from a single place."
        )
      }
    />

    <div class="flex justify-center">
      <div class="card bg-base-100 shadow-xl border border-base-200 w-full max-w-3xl">
        <div class="card-body space-y-4">
          <div class="flex items-start justify-between gap-4">
            <div>
              <p class="text-sm uppercase tracking-wide text-primary font-semibold">
                {gettext("Robots Directive")}
              </p>
              <h2 class="text-2xl font-bold">{gettext("Noindex · Nofollow")}</h2>
              <p class="text-base text-base-content/70">
                {gettext("Adds")}
                <code class="font-mono text-sm bg-base-200 rounded px-1.5 py-0.5">
                  &lt;meta name="robots" content="noindex,nofollow"&gt;
                </code>
                {gettext(
                  "to every PhoenixKit layout, blocking crawlers from indexing or following links."
                )}
              </p>
            </div>
            <label class="flex items-center gap-2 cursor-pointer">
              <span class="text-sm font-semibold text-base-content/70">
                {if @no_index_enabled, do: gettext("Enabled"), else: gettext("Disabled")}
              </span>
              <input
                type="checkbox"
                class="toggle toggle-primary toggle-lg"
                checked={@no_index_enabled}
                phx-click="toggle_no_index"
              />
            </label>
          </div>

          <div class={[
            "alert",
            if(@no_index_enabled, do: "alert-warning", else: "alert-info"),
            "bg-base-200/70"
          ]}>
            <.icon
              name={
                if @no_index_enabled, do: "hero-no-symbol", else: "hero-magnifying-glass-circle"
              }
              class="w-6 h-6"
            />
            <div class="text-sm leading-relaxed">
              <%= if @no_index_enabled do %>
                {gettext(
                  "Search engines are instructed to skip this environment. Remove this before launch."
                )}
              <% else %>
                {gettext(
                  "Crawlers are allowed to index the site. Enable the toggle to hide staging deployments."
                )}
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
