{{define "partials/detail_sidebar.html"}}
  {{if .ImageTags}}
  <div id="tags-section">
    <div class="sidebar-section-header">
      <span class="sidebar-section-title">Tags</span>
      <button id="tags-toggle" class="folder-toggle-btn" data-target="tag-groups">▼</button>
    </div>
    <div id="tag-groups" class="detail-tag-groups">
      {{range groupByImageTags .ImageTags}}
      <div class="tag-group">
        <div class="tag-category-label" style="color:{{.Color}}">{{.Name}}</div>
        <ul class="tag-list-sidebar">
          {{range .Tags}}
          <li class="tag-entry {{if .IsAuto}}tag-auto-entry{{end}}" data-name="{{.TagName}}">
            {{if .IsAuto}}<span class="auto-dot" title="auto-tagged">·</span>{{else}}<span class="auto-dot-spacer"></span>{{end}}
            <a href="/?q={{.Category}}:{{.TagName}}" class="tag-link" style="color:{{.Color}}">{{.TagName}}</a>
            <span class="tag-count">{{.UsageCount}}</span>
          </li>
          {{end}}
        </ul>
      </div>
      {{end}}
    </div>
  </div>
  {{end}}

  {{/* Folder tree, source filters, and saved searches. Lazy-loaded so the
       folder-tree aggregation doesn't block first paint - same pattern the
       gallery sidebar uses. BackQuery drives active-state highlighting when
       the detail page was reached with gallery context. */}}
  <div id="detail-sidebar-browse"
       hx-get="/internal/sidebar-browse?q={{.BackQuery}}"
       hx-trigger="load"
       hx-swap="innerHTML"></div>
{{end}}