{{ define "main" }}
  {{ partial "minimal-navbar.html" }}
  {{ $path := "" }}
  {{ with .File }}
    {{ $path = .Path }}
    {{ if eq .Dir "feed/" }}
      <h5>/feed</h5>
    {{ else if eq .Dir "dev/" }}
      <h5>/dev</h5>
    {{ else if eq .Dir "files/" }}
      <h5>/files</h5>
    {{ end }}
  {{ end }}
  <p>{{ .Content }}</p>
  {{ if hasPrefix $path "files" }}
    {{ $colors := slice "cyan" "yellow" "pink"}}
    {{ $opts := len $colors }}
    {{ range $i, $top := readDir "content/files/" }}
      <!-- Skip non - directories -->
      {{ if eq $top.IsDir false }} {{ continue }} {{ end }}

      <!-- Generate card for each folder -->
      <div class="card" style="border-color: {{ mod $i $opts | index $colors }}">
        <h5 class="card-header postcard card-title">{{ $top.Name }}</h5>
        <!-- generate links for all the folder's files -->
        {{ range $file := print "content/files/" $top.Name | readDir }}
          <ul>
            <a href="{{ print "/files/" $top.Name "/" $file.Name }}">
              {{ print $file.Name }}
            </a>
          </ul>
        {{ end }}
      </div>
    {{ end }}
  {{ end }}
  {{ $colors := slice "cyan" "yellow" "pink"}}
  {{ $opts   := len $colors }}
  {{ range $i, $page := .Pages.ByDate.Reverse }}
    {{ $opt := mod $i $opts }}
    <div class="card" style="border-color: {{ index $colors $opt }}">
      <a href="{{ anchorize .Page.Name }}">
        <h5 class="card-header postcard card-title">{{ .Title }}</h5>
      </a>
      <div class="card-body postcard">
        {{  if .Page.Params.Article }}
          <p class="card-text">{{ .Description }}</p>
        {{ else }}
          <p class="card-text">{{ .Content }}</p>
        {{ end }}
        {{  if .Page.Params.Thumbnail }}
          <a href="{{ .Params.Thumbnail }}">
            <img class="card-img" src="{{ .Params.Thumbnail }}">
          </a>
        {{ end }}
      </div>
      <div class="card-footer text-muted postcard">
        {{ .Date | time.Format ":date_short" }} {{ .Date | time.Format ":time_long"}}
      </div>
    </div>
  {{ end }}
{{ end }}