<template>
  <div id="app">
    <div id="sidebar">
      <h1>Nuxt Contacts</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>
          <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>
      </nav>
    </div>
    <div id="detail">
      <slot/>
    </div>
  </div>
</template>
