<script setup lang="ts">
const { $trpc } = useNuxtApp();

const { data: contacts } = await $trpc.contactList.useQuery();
</script>

<template>
  <div id="app">
    <div id="sidebar">
      <h1>
        <NuxtLink to="/about">Nuxt Contacts</NuxtLink>
      </h1>
      <div>
        <form id="search-form" role="search">
          <input
            id="q"
            aria-label="Search contacts"
            name="q"
            placeholder="Search"
            type="search"
          >
          <div
            id="search-spinner"
            aria-hidden
            hidden
          />
        </form>
        <form method="post">
          <button type="submit">New</button>
        </form>
      </div>
      <nav>
        <ul v-if="contacts?.length">
          <li v-for="contact in contacts" :key="contact.id">
            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: contact.id}}">
              <template v-if="contact.first || contact.last">{{ contact.first }} {{ contact.last }}</template>
              <i v-else>No Name</i>
              <span v-if="contact.favorite">★</span>
            </NuxtLink>
          </li>
          <li>
            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 1}}">Your Name</NuxtLink>
          </li>
          <li>
            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 2}}">Your Friend</NuxtLink>
          </li>
        </ul>
        <p v-else><i>No contacts</i></p>
      </nav>
    </div>
    <div id="detail">
      <slot/>
    </div>
  </div>
</template>
