{{ define "main" }}
<div class="ui divider hidden"></div>
<div class="ui top attached menu borderless">
  <div class="ui button icon item" id="toc-button">
    <i class="icon chevron down"></i>
  </div>
  <div class="ui item">
    <div class="ui breadcrumb small">
      <a class="section" href="/"><i class="ui icon home"></i></a>
      <div class="divider"> / </div>
      <a class="section" href="{{ .Parent.Permalink }}">{{ humanize .Parent.Name }}</a>
      <div class="divider"> / </div>
      <div class="active section">{{ .Title }}</div>
    </div>
  </div>
  <div class="ui flowing popup bottom left transition hidden">
    {{ .TableOfContents }}
  </div>
  <div class="menu right">
    <div id="reading-time" class="item">
      {{ .ReadingTime }}m
    </div>
    <div id="version-popup" class="ui popup inverted transition hidden">
      <span style="white-space:nowrap;">
        This article will take {{ .ReadingTime }} minutes to
        read.
      </span>
    </div>
    <div id="version" class="item">
      {{ .Param "version" }}
    </div>
    <div id="version-popup" class="ui popup inverted transition hidden">
      <span style="white-space:nowrap;">
        This guide was written for version {{ .Param "version" }}
      </span>
    </div>
  </div>
</div>
<article class="ui segment attached bottom">
  {{ .Content }}
</article>
<div class="ui segment attached compacted right aligned">
  last modified {{ .Lastmod.Format "Monday, January 2, 2006" }}
</div>
<div class="ui hidden divider"></div>
<div class="ui two column grid">
  <div class="row">
    {{ if .PrevInSection }}
    <div class="column">
      <div class="ui message">
        <a class="ui small header" href="{{ .PrevInSection.Permalink }}">
          {{ .PrevInSection.Title }}
        </a>
        <div class="text">
          {{ .PrevInSection.Param "description" }}
        </div>
      </div>
    </div>
    {{ else }}
    <div class="column"> </div>
    {{ end }}
    {{ if .NextInSection }}
    <div class="column right aligned">
      <div class="ui message">
        <a href="{{ .NextInSection.Permalink }}" class="ui small header">
          {{ .NextInSection.Title }}
        </a>
        <div class="text">{{ .NextInSection.Param "description" }}</div>
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}
{{ define "scripts" }}
<script>
  $('#toc-button').popup({
    inline: true,
    on: 'click'
  });
  $('#version').popup({
    inline: true,
  });
  $('#reading-time').popup({
    inline: true,
  });
</script>
{{ end }}