{{/* Hugo Blox: Languages */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $author := $block.content.username | default "me" }}
{{ $profile := partial "functions/get_author_profile" $author }}
{{ $langs := $profile.languages }}

<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center">

  <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
    {{ $block.content.title | markdownify | emojify }}
  </div>

  {{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}

  <div class="flex items-center flex-col lg:flex-row gap-y-10 lg:gap-y-0 lg:gap-x-8">
    {{ range $langs }}
    {{ $percent := 100.0 }}
    {{ $levelText := .level }}
    {{ $label := .label }}

    {{ $levelStr := printf "%v" ($levelText | default "") }}
    {{ $numericLevel := gt (len (findRE "^[0-9]+(?:\\.[0-9]+)?$" $levelStr)) 0 }}

    {{ if $numericLevel }}
      {{ $percent = mul (float $levelStr) 20 }}
    {{ else if .percent }}
      {{ $percent = float .percent }}
    {{ end }}

    {{ if gt $percent 100 }}{{ $percent = 100 }}{{ end }}
    {{ if lt $percent 0 }}{{ $percent = 0 }}{{ end }}

    <div class="flex flex-col items-center">
      <div class="flex items-center justify-center w-28 h-28">
        <svg class="transform -rotate-90" viewBox="0 0 288 288">
          <circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
                  class="text-gray-200 dark:text-gray-700" />
          <circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
                  class="text-primary-600 dark:text-primary-300"
                  style="stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{$percent}}/100))" />
        </svg>
        <span class="absolute text-3xl">{{ $percent }}%</span>
      </div>
      <span class="text-1xl">{{.name}}</span>
      {{ if $label }}
        <span class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $label }}</span>
      {{ else if and $levelText (not $numericLevel) }}
        <span class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ . }}</span>
      {{ end }}
    </div>
    {{ end }}
  </div>

</div>