{{ $id := .id }}
{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
{{ $sectionId := default (printf "%s-section" $id) .sectionId }}
{{ $countId := default (printf "%s-count" $id) .countId }}
{{ $count := default "..." .count }}
{{ $group := .group }}

<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
    id="{{ $buttonId }}" title="{{ .title }}" data-tooltip>
  <img src="{{ .icon }}" width="20" height="20"
      alt="{{ .title }}"
      class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
  <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70"
        id="{{ $countId }}">{{ $count }}</span>
</button>

<script>
  (function() {
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.getElementById("{{ $buttonId }}");
      const section = document.getElementById("{{ $sectionId }}");
      const group = "{{ $group }}";

      if (!button || !section) return;

      const entranceAnimation = 'animate-slide-in-down';
      const exitAnimation = 'animate-slide-out-up';

      const closeSection = () => {
        if (section.classList.contains('hidden')) return;

        section.classList.remove(entranceAnimation);
        section.classList.add(exitAnimation);
        setTimeout(() => {
          section.classList.add('hidden');
        }, 200);
      };

      const openSection = () => {
        section.classList.remove('hidden', exitAnimation);
        section.classList.add(entranceAnimation);
      };

      if (group) {
        document.addEventListener('toggle-group-open', (e) => {
          if (e.detail.group === group && e.detail.sourceId !== "{{ $buttonId }}") {
            closeSection();
          }
        });
      }

      button.addEventListener('click', () => {
        const isHidden = section.classList.contains('hidden');

        if (isHidden) {
          if (group) {
             const event = new CustomEvent('toggle-group-open', {
                detail: { group: group, sourceId: "{{ $buttonId }}" }
             });
             document.dispatchEvent(event);
          }
          openSection();
        } else {
          closeSection();
        }
      });
    });
  })();
</script>