{% macro render_node(node, path=[]) %}
{% set full_path = path + [node.label] %}
<div x-data='{% if node.children %}sidebarNode({{ full_path | tojson }}){% else %}{ open: false, autoExpanded: false }{% endif %}'
     x-show='({{ node.search_blob() | tojson }}.includes(search.toLowerCase()) || !search) && {{ node.subtree_kinds() | tojson }}.some((k) => kindFilter[k])'
     x-effect='
        if (!search) { autoExpanded = false }
        else if (!autoExpanded && {{ node.search_blob() | tojson }}.includes(search.toLowerCase())) { open = true; autoExpanded = true }
    '>
    <div class="flex w-full cursor-pointer items-center gap-1 rounded px-1 py-1 transition-colors duration-150 hover:text-rose-500 hover:bg-slate-400/20"
         {%
         if
         node.has_records
         %}:class='JSON.stringify(selectedTag) === JSON.stringify({{ node.key | tojson }}) ? "bg-rose-500/20 text-rose-500" : ""'
         {%
         endif
         %}
         @click='{% if node.has_records %}$dispatch("tag-selected", { tag: {{ node.key | tojson }}, recordKinds: {{ node.record_kinds | tojson }} }){% elif node.children %}toggle(){% endif %}'>
        {% if node.children %}
        <span class="flex h-6 w-6 flex-shrink-0 items-center justify-center"
              @click.stop="toggle()">
            <svg xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="h-5 w-5 transition-transform"
                 :class="{ 'rotate-90': open }">
                <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
        </span>
        {% else %}
        <span class="w-6 flex-shrink-0"></span>
        {% endif %}

        {% if node.has_records %}
        <span class="flex flex-1 items-center gap-1 truncate px-1 text-left text-base">
            {% if "plot" in node.record_kinds %}
            <svg class="h-4 w-4 flex-shrink-0"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
                <path d="M4 4v16h16v-2H6V4H4z"
                      fill="currentColor"></path>
                <path d="M8 13l3-3 4 4 4-4v5H8v-2z"
                      fill="currentColor"></path>
            </svg>
            {% endif %}
            {% if "table" in node.record_kinds %}
            <svg class="h-4 w-4 flex-shrink-0"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
                <rect x="4"
                      y="4"
                      width="16"
                      height="16"
                      rx="1"
                      stroke-width="2"></rect>
                <path d="M4 10h16M12 4v16"
                      stroke-width="2"></path>
            </svg>
            {% endif %}
            <span class="truncate"
                  title="{{ node.label }}">{{ node.label }}</span>
        </span>
        {% else %}
        <span class="flex-1 truncate px-1 text-base text-slate-500 dark:text-slate-400"
              title="{{ node.label }}">{{ node.label }}</span>
        {% endif %}

        {% if node.children %}
        <span class="flex-shrink-0 px-1 text-sm text-slate-400 dark:text-slate-500">{{ node.record_count() }}</span>
        {% endif %}
    </div>

    {% if node.children %}
    <div class="ml-4"
         x-show="open">
        {% for child in node.children %}
        {{ render_node(child, full_path) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}

<aside id="sidebar-panel"
       x-show="sidebarOpen"
       x-cloak
       x-data="sidebarFilter"
       :style="{ width: width + 'px' }"
       class="flex flex-shrink-0 flex-col overflow-hidden border-r border-slate-400/30 bg-slate-100 dark:bg-slate-800">
    <div class="space-y-2 border-b border-slate-400/30 p-2">
        <div class="relative">
            <input type="search"
                   x-model="search"
                   placeholder="Search tags..."
                   class="w-full rounded border border-slate-400/40 bg-slate-100 px-2 py-1 pr-7 text-base placeholder:text-slate-500 focus:border-rose-500 focus:outline-none dark:bg-slate-800 dark:placeholder:text-slate-400">
            <button type="button"
                    x-show="search"
                    x-cloak
                    @click="search = ''"
                    class="absolute inset-y-0 right-1 flex items-center px-1 text-slate-500 transition-colors duration-150 hover:text-rose-500"
                    aria-label="Clear search">
                <svg xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 20 20"
                     fill="currentColor"
                     class="h-4 w-4">
                    <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                </svg>
            </button>
        </div>

        <div class="flex gap-1">
            <button type="button"
                    @click="toggleKind('plot')"
                    :class="kindFilter.plot ? 'bg-rose-500 text-white' : 'text-slate-500 dark:text-slate-400'"
                    class="flex flex-1 items-center justify-center gap-1 rounded border border-slate-400/40 px-2 py-0.5 text-base font-bold uppercase transition-colors duration-150 hover:bg-rose-700 hover:text-white cursor-pointer">
                <svg class="h-5 w-5"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path d="M4 4v16h16v-2H6V4H4z"
                          fill="currentColor"></path>
                    <path d="M8 13l3-3 4 4 4-4v5H8v-2z"
                          fill="currentColor"></path>
                </svg>
                <span>Plot</span>
            </button>
            <button type="button"
                    @click="toggleKind('table')"
                    :class="kindFilter.table ? 'bg-rose-500 text-white' : 'text-slate-500 dark:text-slate-400'"
                    class="flex flex-1 items-center justify-center gap-1 rounded border border-slate-400/40 px-2 py-0.5 text-base font-bold uppercase transition-colors duration-150 hover:bg-rose-700 hover:text-white cursor-pointer">
                <svg class="h-5 w-5"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <rect x="4"
                          y="4"
                          width="16"
                          height="16"
                          rx="1"
                          stroke-width="2"></rect>
                    <path d="M4 10h16M12 4v16"
                          stroke-width="2"></path>
                </svg>
                <span>Table</span>
            </button>
        </div>
    </div>

    <div class="flex-1 overflow-y-auto p-1">
        {% if tag_tree %}
        {% for node in tag_tree %}
        {{ render_node(node) }}
        {% endfor %}
        {% else %}
        <p class="p-2 text-base text-slate-500 dark:text-slate-400">No tagged records found.</p>
        {% endif %}
    </div>
</aside>