let on_submit = {
        move |ev: SubmitEvent| {
            if ev.default_prevented() {
                crate::logging::log!("---1");
                return;
            }

            ev.prevent_default();

            crate::logging::log!("---2");

            match ServFn::from_event(&ev) {
                Ok(new_input) => {
                    action.dispatch(new_input);
                }
                Err(err) => {
                    crate::logging::error!(
                        "Error converting form field into server function \
                         arguments: {err:?}"
                    );
                    action.value().set(Some(Err(
                        ServerFnErrorErr::Serialization(err.to_string())
                            .into_app_error(),
                    )));
                    action.version().update(|n| *n += 1);
                }
            }
        }
    };

#[component]
pub fn WithActionForm() -> impl IntoView {
    let action = ServerAction::<AddRow>::new();
    let row_count =
        Resource::new(move || action.version().get(), |_| get_rows());

    view! {
        <h3>Using <code>"<ActionForm/>"</code></h3>
        <p>
            <code>"<ActionForm/>"</code>
            "lets you use an HTML "
            <code>"<form>"</code>
            "to call a server function in a way that gracefully degrades."
        </p>
        <ActionForm
            action
            on:sumbit=move |ev: SubmitEvent| {
                leptos::logging::log!("+++1");
                ev.prevent_default();
                leptos::logging::log!("+++2");
            }
        >
            <input
                // the `name` of the input corresponds to the argument name
                name="text"
                placeholder="Type something here."
            />
            <button>Submit</button>
        </ActionForm>
        <p>You submitted: {move || format!("{:?}", action.input().get())}</p>
        <p>The result was: {move || format!("{:?}", action.value().get())}</p>
        <Transition>
            archive underaligned: need alignment 4 but have alignment 1
            <p>Total rows: {row_count}</p>
        </Transition>
    }
}