{{ define "main" }}

{{/* Breadcrumbs */}}

<div {{ if .Param "autonumber" }} class="autonumber" {{ end }}>

  <div class="single-intro-container">

    {{/* Title and Summary */}}

    <h2 class="single-title">{{ .Title }}</h2>
    {{ if .Param "author" }}
    <p>By: {{ .Param "author" }}</p>
    {{ end }}

    <div class="controls">
    <div>
      <label class="chord-toggle">
        <input type="checkbox" id="toggle-chords" checked>
        <span class="slider"></span>
        <span class="label-text">Show Chords</span>
      </label>
    </div>

    <div >
      <label for="key-selector">Key:</label>
      <select id="key-selector" data-original-key="{{ with .Params.key }}{{ . }}{{ else }}C{{ end }}">
        {{ $allKeys := slice "C" "C#/Db" "D" "D#/Eb" "E" "F" "F#/Gb" "G" "G#/Ab" "A" "A#/Bb" "B" }}
        {{ $currentKey := .Params.key | default "C" }}
        {{ range $k := $allKeys }}
        {{ $cleanKey := (index (split $k "/") 0) }}
        <option value="{{ $cleanKey }}" {{ if in $currentKey $k }}selected{{ end }}>
          {{ $k }}
        </option>
        {{ end }}
      </select>
    </div>
    </div>

  </div>

  {{ if .Param "showTags" }}

  {{ $taxonomy := "tags" }}
    {{ with .Param $taxonomy }}

    <div class="single-tags">
      {{ range $index, $tag := . }}
        {{ with $.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}}
        <span>
          <a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
        </span>
        {{ end }}
      {{ end }}
    </div>

    {{ end }}
  {{ end }}

  {{/* Page content */}}

  <div class="single-content">
    {{ .Content }}
  </div>

  {{/* Back to top */}}
  <div class="back-to-top">
    <a href="#top">
      back to top
    </a>
  </div>
</div>

{{ end }}