{{ $key := .page.Title }}
{{ $pages := .pages }}
{{ $count := len $pages }}
{{ $param_name := .param_name }}
{{ $param_title := .param_title }}
{{ $totalWidth := 100.0 }}
{{ $totalHeight := 50.0 }}
{{ $width := div $totalWidth  12 }}
{{ $month_map := .page.Site.Data.month }}

{{ $color := "#a8c7f0" }}
{{ $strokecolor := "#d3e3f8" }}

<script>
function onyearover(key, month, text){
// alert( year + key  + "!")
  document.getElementById( key ).innerHTML = month + ": " + text;

}

function onyearout(key){
// alert( year + key  + "!")
document.getElementById( key ).innerHTML = "<div style='color: transparent'>:</div>";
}
</script>

<svg width="{{ $totalWidth }}%" height="{{ $totalHeight }}" 
xmlns="http://www.w3.org/2000/svg">
  {{ $month := 0 }}
  {{ $actMonth := 0 }}
  {{ $maxCount := 0 }}
  {{ $actCount := 0 }}
  {{ range $pages }}
    {{ $month = dateFormat "2006-01" .Date }}
    {{ if ne $month $actMonth }}
      {{ $actMonth = $month }}
      {{ $actCount = 0 }}
    {{ end }}
    
    {{ $actCount = add 1 $actCount }}
    
    {{ $maxCount = add 1 $maxCount }}
    {{ $month = dateFormat "2006-01" .Date  }}
  
    {{ if gt $actCount $maxCount }}
      {{ $maxCount = $actCount }}
    {{ end }}
  {{ end }}
  
  {{ $x := 0 }}
  {{ $month := 0 }}

  {{ range $i, $sequence :=  (seq 12) }}
    {{ $i }}: {{ $sequence }}
    {{ $x = mul ( sub ( float $sequence ) 1 ) $width }}
    {{ $m:= printf "%02d" $sequence }}
    {{ $d:= (print "2006-" $m "-01")}}
      <rect height="100%" y="0" x="{{ $x }}%" opacity="0.8"
      width="{{ $width }}%"  fill="transparent" stroke-width="2" stroke="{{ $color }}"/>
       <text y="{{ mul $totalHeight 0.7 }}" x="{{ sub (mul $width $sequence) (div $width 2) }}%"   text-anchor="middle" fill="{{ $color }}" font-size="25" font-weight="bold" opacity="0.8">{{ substr (dateFormat "Jan" $d) 0 1 }} </text>
  {{ end }}
  
  {{ $adate := "" }}
  {{ range sort ( $pages.GroupByDate "2006-01" ) "Key" }}
    {{ range first 1 .Pages }}
      {{ $month = .Params.Date.Format "1" }}
    {{ end }}
    {{ $height := 0 }}
    {{ $height = mul (float $totalHeight ) ( div (float ( len .Pages ) ) ( float $maxCount ) )  }}
  
    {{ $x = mul ( sub ( float $month ) 1 ) $width }}

    <rect height="{{ $height }}" y="{{ sub $totalHeight $height }}" x="{{ $x }}%" 
      opacity="0.6"
      width="{{ $width }}%"  fill="{{ $color }}" stroke-width="1.5" stroke="{{$strokecolor}}"/>

      <rect onmouseover="onyearover( {{ $param_title }}, {{index $month_map ($month)}}, {{ i18n "tours" ( len .Pages ) }} )" 
        onmouseout="onyearout({{ $param_title }})"  
        height="100%" y="0" x="{{ $x }}%" 
        width="{{ $width }}%"  fill="{{ $color }}" stroke-width="1.5" stroke="{{$strokecolor}}"
        class="o-10"/>
    {{$x }}
  {{ end }}
  
</svg>