{{define "yield"}}
<div id="T-home-page" class="container page page-mobile-full home-page">
  <h1 class="sr-only">Notes</h1>

  {{template "pageToolbar" dict "data" . "class" "toolbar"}}

  <div class="note-group-list">
    {{if eq (len .NoteGroups) 0 }}
      <div class="note-group-list-empty">No notes found.</div>
    {{end}}

    {{range .NoteGroups}}
      {{template "noteGroup" .}}
    {{end}}
  </div>
</div>
{{end}}

{{define "noteGroup"}}
<section class="note-group">
  <header class="note-group-header">
    <h2 class="date">
      <time datetime="{{ toDateTime .Year .Month }}">
        {{ getFullMonthName .Month }} {{ .Year }}
      </time>
    </h2>
  </header>

  <ul class="list-unstyled note-list">
    {{range .Data}}
      {{template "noteItem" .}}
    {{end}}
  </ul>
</section>
{{end}}

{{define "noteItem"}}
<li class="note-item">
  <a href="/notes/{{ .UUID }}" class="link">
    <div class="body">
      <div class="note-header">
        <h3 class="book-label">
          {{ .Book.Label }}
        </h3>

        {{template "time" dict "value" .UpdatedAt "text" (timeAgo .UpdatedAt)}}
      </div>

      <div class="note-content">
        {{ excerpt .Body 160 }}
      </div>
    </div>
  </a>
</li>
{{end}}

{{define "pageToolbarContent"}}
<nav class="paginator">
  <span class="paginator-info">
    <span class="paginator-label">{{ .CurrentPage }}</span> of
    <span class="paginator-label">{{ .MaxPage }}</span>
  </span>

  {{template "pager" dict "disabled" (not .HasPrev) "direction" "left" "page" (add .CurrentPage -1)}}
  {{template "pager" dict "disabled" (not .HasNext) "direction" "right" "page" (add .CurrentPage 1)}}
</nav>
{{end}}

{{define "pager"}}

{{$ariaLabel := ""}}
{{if eq .direction "left"}}
  {{$ariaLabel = "Previous page"}}
{{else}}
  {{$ariaLabel = "Next page"}}
{{end}}

{{if .disabled}}
<span class="paginator-link disabled">
  {{template "caret" dict "direction" .direction "stroke" "gray"}}
</span>
{{else}}
<a
  href="/?page={{ .page }}"
  aria-label="{{ $ariaLabel }}"
  class="paginator-link"
>
  {{template "caret" dict "direction" .direction "stroke" "black"}}
</a>
{{end}}
{{end}}