{{ define "fragments/tabSelector" }}
  {{ $name := .Name }}
  {{ $all := .Values }}
  {{ $active := .Active }}
  <div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
    {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
    {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
    {{ range $index, $value := $all }}
      {{ $isActive := eq $value.Key $active }}
      <a href="?{{ $name }}={{ $value.Key }}"
         class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full block hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
       {{ if $value.Icon }}
         {{ i $value.Icon "size-4" }}
       {{ end }}

       {{ with $value.Meta }}
         {{ . }}
       {{ end }}

       {{ $value.Value }}
      </a>
    {{ end }}
  </div>
{{ end }}