<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-2xl">
    <div class="text-sm font-semibold text-error">{gettext("ACCOUNT AND DATA")}</div>
    <h1 class="mt-2 text-4xl font-black">{gettext("Request account deletion")}</h1>
    <p class="mt-3 text-base-content/65">
      {gettext(
        "This requests deletion of your Who Need Help account and associated personal data. Some records may need to be retained when required for safety, fraud prevention, legal obligations, or resolving an active dispute; any retained data must be described in the applicable retention notice."
      )}
    </p>
    <div class="alert alert-warning mt-5 text-sm">
      {gettext(
        "Submitting this form does not immediately sign you out or erase evidence required for an open safety investigation. Support will verify and process the request."
      )}
    </div>

    <.form for={@form} action={~p"/account/delete"} class="mt-8 space-y-4">
      <input type="hidden" name="support_request[kind]" value="account_deletion" />
      <input
        type="hidden"
        name="support_request[subject]"
        value="Delete my Who Need Help account"
      />
      <.input
        field={@form[:contact_email]}
        type="email"
        label={gettext("Account email")}
        value={@contact_email || @form[:contact_email].value}
        readonly={not is_nil(@contact_email)}
        required
      />
      <.input
        field={@form[:details]}
        type="textarea"
        label={gettext("Additional information")}
        required
      />
      <.button class="btn btn-error w-full">{gettext("Request account deletion")}</.button>
    </.form>
  </div>
</Layouts.app>
