<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="text-center">
    <.header>
      {gettext("Account Settings")}
      <:subtitle>{gettext("Manage your account email address and password settings")}</:subtitle>
    </.header>
  </div>

  <.form :let={f} for={@email_changeset} action={~p"/users/settings"} id="update_email">
    <input type="hidden" name="action" value="update_email" />

    <.input
      field={f[:email]}
      type="email"
      label={gettext("Email")}
      autocomplete="username"
      spellcheck="false"
      required
    />

    <.button variant="primary" phx-disable-with={gettext("Changing...")}>
      {gettext("Change Email")}
    </.button>
  </.form>

  <div class="divider" />

  <section class="rounded-3xl border border-base-300 p-5">
    <h2 class="text-lg font-bold">{gettext("Google sign-in")}</h2>
    <p class="mt-1 text-sm text-base-content/60">
      <%= if @google_auth_connected do %>
        {gettext("A Google account is connected. You can use it to sign in.")}
      <% else %>
        {gettext(
          "Connect Google only after signing in here. We never merge accounts automatically by matching email addresses."
        )}
      <% end %>
    </p>

    <.form
      :if={!@google_auth_connected}
      for={%{}}
      as={:google_link}
      action={~p"/auth/google/link"}
      id="google_link_form"
      class="mt-4"
    >
      <.google_auth_button
        label={gettext("Connect Google account")}
        disabled={!@google_auth_enabled}
      />
      <p :if={!@google_auth_enabled} class="mt-2 text-center text-xs text-base-content/55">
        {gettext("Google sign-in will be available after the operator configures it.")}
      </p>
    </.form>

    <.form
      :if={@google_auth_connected}
      for={%{}}
      action={~p"/auth/google/link"}
      method="delete"
      id="google_unlink_form"
      class="mt-4"
    >
      <.button
        variant="primary"
        class="btn-soft"
        data-confirm={gettext("Disconnect Google sign-in from this account?")}
      >
        {gettext("Disconnect Google")}
      </.button>
    </.form>
  </section>

  <div class="divider" />

  <.form :let={f} for={@password_changeset} action={~p"/users/settings"} id="update_password">
    <input type="hidden" name="action" value="update_password" />
    <input
      type="email"
      id="update_password_username"
      name="username"
      value={@current_scope.user.email}
      autocomplete="username"
      class="hidden"
      aria-hidden="true"
      tabindex="-1"
      readonly
    />

    <.input
      field={f[:password]}
      type="password"
      label={gettext("New password")}
      autocomplete="new-password"
      spellcheck="false"
      required
    />
    <.input
      field={f[:password_confirmation]}
      type="password"
      label={gettext("Confirm new password")}
      autocomplete="new-password"
      spellcheck="false"
      required
    />
    <.button variant="primary" phx-disable-with={gettext("Changing...")}>
      {gettext("Save Password")}
    </.button>
  </.form>

  <div class="divider" />

  <section class="rounded-3xl border border-error/40 p-5">
    <h2 class="text-lg font-bold text-error">{gettext("Account and personal data")}</h2>
    <p class="mt-1 text-sm text-base-content/60">
      {gettext(
        "Request deletion of your account and associated personal data, or contact support about access and export requests."
      )}
    </p>
    <div class="mt-4 flex flex-wrap gap-2">
      <.link navigate={~p"/account/delete"} class="btn btn-error btn-outline">
        {gettext("Request account deletion")}
      </.link>
      <.link navigate={~p"/support/requests"} class="btn btn-outline">
        {gettext("View support requests")}
      </.link>
    </div>
  </section>
</Layouts.app>
