<div class="w-full">
  <div class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
    <div>
      <div class="flex justify-between">
        <p class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
          {{ .Name }} Leaderboard
        </p>
        <div class="flex gap-2 text-xs text-gray-400 items-center">
          <label for="all-{{ .Name }}"
                 class="cursor-pointer hover:text-black dark:hover:text-white">all</label>
          <label for="year-{{ .Name }}"
                 class="cursor-pointer hover:text-black dark:hover:text-white">year</label>
          <label for="month-{{ .Name }}"
                 class="cursor-pointer hover:text-black dark:hover:text-white">month</label>
          <label for="week-{{ .Name }}"
                 class="cursor-pointer hover:text-black dark:hover:text-white">week</label>
        </div>
      </div>
    </div>
    <input type="radio"
           name="options-{{ .Name }}"
           id="all-{{ .Name }}"
           class="hidden peer/All"
           checked />
    <input type="radio"
           name="options-{{ .Name }}"
           id="year-{{ .Name }}"
           class="hidden peer/Year" />
    <input type="radio"
           name="options-{{ .Name }}"
           id="month-{{ .Name }}"
           class="hidden peer/Month" />
    <input type="radio"
           name="options-{{ .Name }}"
           id="week-{{ .Name }}"
           class="hidden peer/Week" />
    {{ range $key, $data := .Data }}
    <div class="flex items-end my-6 space-x-2 hidden peer-checked/{{ $key }}:block">
      {{ $length := len $data }}
      {{ if eq $length 0 }}
      <p class="text-5xl font-bold text-black dark:text-white">N/A</p>
      {{ else }}
      <p class="text-5xl font-bold text-black dark:text-white">{{ (index $data 0).UserID }}</p>
      {{ end }}
    </div>
    <div class="hidden dark:text-white peer-checked/{{ $key }}:block">
      {{ range $index, $item := $data }}
      {{ if lt $index 3 }}
      {{ if eq $index 0 }}
      <div class="flex items-center justify-between pt-2 pb-2 text-sm">
      {{ else }}
      <div class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200">
      {{ end }}
	<div>
	  <p>{{ $item.UserID }}</p>
	</div>
	<div class="flex items-end font-bold">{{ $item.Value }}</div>
      </div>
      {{ end }}
      {{ end }}
    </div>
    {{ end}}
  </div>
</div>
