#[component]
#[allow(non_snake_case)]
pub fn MobileView() -> impl IntoView {
    let products = create_resource(|| (), |_| async move { get_products().await });
    let categories = create_resource(|| (), |_| async move { get_categories().await });

    view! {
        <Body/>
        <ul class="list-unstyled ps-0 overflow-x-hidden overflow-y-scroll">
            <Suspense fallback=move || {
                view! {
                    <span id="loading-text" class="text-bold fs-4">
                        "Caricamento..."
                    </span>
                }
            }>
                <ErrorBoundary fallback=move |errors| view! { <ErrorTemplate errors=errors/> }>
                    <For
                        each=move || categories.get().unwrap().unwrap()
                        key=move |category| category.id.to_owned()
                        children=move |category: Category| {
                            view! {
                                <li class="mb-1">
                                    <div class="d-flex gap-1 align-items-center category">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="20"
                                            height="20"
                                            fill="currentColor"
                                            class="bi bi-caret-right-fill carretRight"
                                            viewBox="0 0 16 16"
                                        >
                                            <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"></path>
                                        </svg>
                                        <button
                                            class="categoryBtn btn btn-toggle align-items-center rounded collapsed vw-100 text-start border-0"
                                            attr:data-bs-toggle="collapse"
                                            attr:data-bs-target="#home-collapse"
                                            attr:aria-expanded="false"
                                            style="padding: 0.3rem !important; border: solid black;border-radius: 5px; font-size: 20px; font-weight: 700;"
                                        >
                                            {category.name}
                                        </button>
                                    </div>
                                    <div class="collapse" id="home-collapse">
                                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small ps-4">
                                            <For
                                                each=move || {
                                                    products
                                                        .get()
                                                        .unwrap()
                                                        .unwrap()
                                                        .iter()
                                                        .filter(|product| {
                                                            product.category_id == category.id
                                                        })
                                                        .collect::<Vec<_>>()
                                                }
                                                key=move |product| product.id.to_owned()
                                                children=move |product| {}
                                            />
                                        </ul>
                                    </div>
                                </li>
                            }
                        }
                    />

                </ErrorBoundary>
            </Suspense>
        </ul>
    }
}