You are an expert in writing code in many different languages. Your goal is to perform code completion for the following code, keeping in mind the rest of the code and the file meta data.
    Metadata details:
    filename: story.rs
    path of file: ./repos/leptos/examples/hackernews/src/routes
    
    the code of the file until where you have to start completion: use crate::api;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn Story() -> impl IntoView {
    let params = use_params_map();
    let story = create_resource(
        move || params().get("id").cloned().unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
            } e
    
pub fn Story() -> impl IntoView {
    let params = use_params_map();
    let story = create_resource(
        move || params().get("id").cloned().unwrap_or_default(),
        move |id| async move {
            if id.is_empty() {
                None
            } else {
                api::fetch_api::<api::Story>(&api::story(&format!("item/{id}")))
                    .await
            }
        },
    );
    let meta_description = move || {
        story
            .get()
            .and_then(|story| story.map(|story| story.title))
            .unwrap_or_else(|| "Loading story...".to_string())
    };

    view! {
        <Suspense fallback=|| view! { "Loading..." }>
            <Meta name="description" content=meta_description/>
            {move || story.get().map(|story| match story {
                None => view! {  <div class="item-view">"Error loading this story."</div> },
                Some(story) => view! {
                    <div class="item-view">
                        <div class="item-view-header">
                        <a href=story.url target="_blank">
                            <h1>{story.title}</h1>
                        </a>
                        <span class="host">
                            "("{story.domain}")"
                        </span>
                        {story.user.map(|user| view! {  <p class="meta">
                            {story.points}
                            " points | by "
                            <A href=format!("/users/{user}")>{user.clone()}</A>
                            {format!(" {}", story.time_ago)}
                        </p>})}
                        </div>
                        <div class="item-view-comments">
                        <p class="item-view-comments-header">
                            {if story.comments_count.unwrap_or_default() > 0 {
                                format!("{} comments", story.comments_count.unwrap_or_default())
                            } else {
                                "No comments yet.".into()
                            }}
                        </p>
                        <ul class="comment-children">
                            <For
                                each=move || story.comments.clone().unwrap_or_default()
                                key=|comment| comment.id
                                let:comment
                            >
                                <Comment comment />
                            </For>
                        </ul>
                    </div>
                </div>
            }})}
        </Suspense>
    }
}