{{template "head.html" .}}
{{template "nav.html" .}}

<div class="page-wrap">
  <aside>
    <a href="/contacts/create" class="new">New contact</a>
    <!-- TODO: fetch list of address books -->
    <a href="#" class="active">{{.AddressBook.Name}}</a>
    <a href="#">Personal</a>
  </aside>

  <div class="container">
    <form id="address-book-form" method="post"></form>
    <main class="contact-list">
      <section class="actions">
        {{ template "contacts-header.html" . }}
      </section>

      <section class="contacts">
        <div class="contact-grid">
          {{range .AddressObjects}}
          <div class="contact-list-checkbox">
            <input type="checkbox" name="paths" value="{{.Path}}" form="address-book-form">
          </div>
          <div class="contact-list-name">
            <a href="{{.URL}}">
              {{.Card.Value "FN"}}
            </a>
          </div>
          <div class="contact-list-email">
            {{$email := .Card.PreferredValue "EMAIL"}}
            {{if $email}}
              <a href="/compose?to={{$email}}">{{$email}}</a>
            {{end}}
          </div>
          {{end}}
          {{if not .AddressObjects}}
          <p class="empty-list">Nothing here yet.</p>
          {{end}}
        </div>
      </section>

      <section class="actions">
        {{ template "contacts-header.html" . }}
      </section>
    </main>
  </div>
</div>

{{template "foot.html"}}