page ApiBlockDemo {
  state nameFilter = "a"
  state found = ""
  state failed = ""

  apis {
    searchDirectory POST /api/directory {
      request {
        body {
          name?: string
        }
      }

      response {
        return data.data.users
      }

      error {
        return []
      }
    }
  }

  load server serverSearch {
    const users = await api.searchDirectory({ name: "a" })
    return { names: users.map((user) => user.name).join(", ") }
  }

  functions {
    client async function search(): Promise<void> {
      const users = await api.searchDirectory({ name: nameFilter })
      found = users.map((user) => user.name).join(", ")
    }
  }

  view {
    <main>
      <button @click="search()">Search</button>
      <p class="found" data-text="found">{found}</p>
      <p class="failed" data-text="failed">{failed}</p>
      <Async source="serverSearch">
        <Loading><p class="server-found">Loading…</p></Loading>
        <Success data="serverSearch"><p class="server-found">{serverSearch.names}</p></Success>
        <Error error="error"><p class="server-found">Failed: {error.message}</p></Error>
      </Async>
      <p class="bound" api="searchDirectory({ name: 'a' })">loading</p>
    </main>
  }
}