{{ define "fragments/tabSelector" }}
  {{ $name := .Name }}
  {{ $all := .Values }}
  {{ $active := .Active }}
  {{ $include := .Include }}
  {{ $form := .Form }}
  <div class="btn-group">
    {{ range $index, $value := $all }}
      {{ $isActive := eq $value.Key $active }}
      {{ if $form }}
      <button type="submit"
         form="{{ $form }}"
         name="{{ $name }}" value="{{ $value.Key }}"
         hx-get="?{{ $name }}={{ $value.Key }}"
         hx-include="{{ $include }}"
         hx-push-url="true"
         hx-target="body"
         hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q"
         class="btn-group-item {{ if $isActive }}active{{ end }}">
       {{ if $value.Icon }}
         {{ i $value.Icon "size-4" }}
       {{ end }}

       <span class="hidden sm:inline">
        {{ with $value.Meta }}
          {{ . }}
        {{ end }}
       </span>
       
       {{ $value.Value }}
      </button>
      {{ else }}
      <a href="?{{ $name }}={{ $value.Key }}"
         {{ if $include }}
         hx-get="?{{ $name }}={{ $value.Key }}"
         hx-include="{{ $include }}"
         hx-push-url="true"
         hx-target="body"
         hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q"
         {{ end }}
         class="btn-group-item {{ if $isActive }}active{{ end }}">
       {{ if $value.Icon }}
         {{ i $value.Icon "size-4" }}
       {{ end }}
       
       <span class="hidden sm:inline">
        {{ with $value.Meta }}
          {{ . }}
        {{ end }}
       </span>
       
       {{ $value.Value }}
      </a>
      {{ end }}
    {{ end }}
  </div>
{{ end }}
