{{ template "widget-base.html" . }}

{{ define "widget-content-classes" }}widget-content-frameless{{ end }}

{{/* ★ FORK (§10.6): a lazy group. The same markup as group.html — the tab bar and
     one panel per child, so page.js's setupGroups drives the tabs unchanged — but
     each panel holds a placeholder carrying the child's id instead of its content.
     zeman-live.js fetches the child from /api/widgets/{id}/render when the tab is
     shown. A child with an audience is marked, so the per-viewer filter strips
     its tab and panel for anyone outside it (zeman_permfilter.go). */}}
{{ define "widget-content" }}
<div class="widget-group-header">
    <div class="widget-header gap-20" role="tablist">
        {{- range $i, $widget := .Widgets }}
        <button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}"{{ if ne "" .TitleURL }} data-title-url="{{ .TitleURL }}"{{ end }}{{ with .VisibleToAttr }} data-glance-visible-to="{{ . }}"{{ end }} aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}" arial-level="2" role="tab" aria-controls="widget-{{ .GetID }}-tabpanel-{{ $i }}" id="widget-{{ .GetID }}-tab-{{ $i }}">{{ $widget.Title }}</button>
        {{- end }}
    </div>
</div>

<div class="widget-group-contents zeman-lazy-group" data-lazy-group="{{ .GetID }}">
{{- range $i, $widget := .Widgets }}
    <div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}" id="widget-{{ .GetID }}-tabpanel-{{ $i }}"{{ with .VisibleToAttr }} data-glance-visible-to="{{ . }}"{{ end }} role="tabpanel" aria-labelledby="widget-{{ .GetID }}-tab-{{ $i }}" aria-hidden="{{ if eq $i 0 }}false{{ else }}true{{ end }}">
        <div class="widget widget-loading zeman-lazy-child" data-widget-id="{{ .GetID }}" data-lazy="pending">
            <div class="widget-loading-spinner"><div class="loading-icon"></div></div>
        </div>
    </div>
{{- end }}
</div>
{{ end }}