<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="card bg-base-100 shadow-xl border border-base-200">
      <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>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
