{{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
{{ $first := urlize (index (.Scratch.Get "tabs") 0).name }}
{{ $group := .Get "group" }}
{{ $groupID := fmt.Printf "tabgroup-%s" (urlize $group) }}
{{ $persist := .Get "persist" }}

<div
  {{ with $group }}
    {{ if $persist }}
      x-data="{ selected: $persist('{{$first}}').as('{{$groupID}}') }"
    {{ else }}
      x-data="{ selected: '{{$first}}' }"
    {{ end }}
    @tab-select.window="$event.detail.group === '{{ . }}'
      ? selected = $event.detail.name
      : null"
  {{ else }}
    x-data="{ selected: '{{ $first }}' }"
  {{ end }}
  aria-role="tabpanel">
  <div aria-role="tablist" class="space-x-2">
    {{ range (.Scratch.Get "tabs") }}
      <button
        class="p-1"
        :class="selected === '{{ .name | urlize }}' &&
          'border-blue-light-500 border-b-4 dark:border-b-blue-dark-600'"
        {{ if $group }}
          @click="$dispatch('tab-select', { group: '{{ $group }}', name:
          '{{ .name | urlize }}'})"
        {{ else }}
          @click="selected = '{{ .name | urlize }}'"
        {{ end }}
      >
        {{ .name | page.RenderString }}
      </button>
    {{ end }}
  </div>
  <hr class="!mt-0" />
  <div>
    {{ range (.Scratch.Get "tabs") }}
      <div
        aria-role="tab"
        :class="selected !== '{{ .name | urlize }}' && 'hidden'"
      >
        {{ .content | page.RenderString (dict "display" "block") }}
      </div>
    {{ end }}
  </div>
  <hr />
</div>