{{ template "header.html" . }}
<div class="container" id="app">
  {{ if .Id }}
  <div class="page-header">
    <h1>
      <span class="glyphicon glyphicon-user"></span>
      {{ .Name }}
    </h1>
  </div>
  <ul class="nav nav-pills">
    <li role="presentation" :class="{ active: tab == 'books' }"><a href="#" @click="showBooks">Livres</a></li>
    {{/* if gt (len .Series) 0 */}}
    <li role="presentation" :class="{ active: tab == 'series' }"><a href="#" @click="showSeries">Series</a></li>
    {{/* end */}}
    {{/* if gt (len .Authors) 0 */}}
    <li role="presentation" :class="{ active: tab == 'authors' }"><a href="#" @click="showAuthors">Co-auteurs</a></li>
    {{/* end */}}
  </ul>
  <div class="panel panel-default" :class="{ hidden: tab != 'books' }">
    <div class="panel-body">
      {{ range .Books }}
      <ul class="list-unstyled">
        <li><span class="glyphicon glyphicon-book"></span> 
          <a href="/books/{{ .Id }}">{{ .Title }}</a>
        </li>
      </ul>
      {{ end }}
    </div>
  </div>
  <div class="panel panel-default" :class="{ hidden: tab != 'series' }">
    <div class="panel-body">
      {{ range .Books }}
      {{/* FIXME unicity */}}
      {{ with .Series }}
      <ul class="list-unstyled">
        <li><span class="glyphicon glyphicon-list"></span> 
        <a href="/series/{{ .Id }}">{{ .Name }}</a>
        </li>
      </ul>
      {{ end }}
      {{ end }}
    </div>
  </div>
  <div class="panel panel-default" :class="{ hidden: tab != 'authors' }">
    <div class="panel-body">
      {{ range .Books }}
      {{ range .Authors }}
      <ul class="list-unstyled">
        <li> <span class="glyphicon glyphicon-user"></span>
        <a href="/authors/{{ .Id }}">{{ .Name }}</a>
        </li>
      </ul>
      {{ end }}
      {{ end }}
    </div>
  </div>
  {{ else }}
  <div class="alert alert-danger" role="alert">Aucun auteur sélectionné</div>
  {{ end }}
</div>
{{ template "footer.html" . }}