{# Container widget: several widgets in one card, one visible at a
   time.

   Each panel is rendered through the same `{% include widget.template %}`
   the dashboard uses for a top-level widget. The `{% with %}` scope is
   what makes that safe to nest: it rebinds `widget_data` for the
   included template only, so the outer widget's own data is still
   intact for the next panel (and for a Tabs inside a Tabs).

   Only panels after the first carry x-cloak, so with Alpine still
   loading the first stays visible and the rest hidden: the card
   degrades to its default tab rather than to everything at once.

   `active` is compared against a loop index, never a label, so nothing
   dynamic reaches an Alpine expression. #}
<div x-data="{ active: 0 }">
  {% if widget_data.panels %}
  <div class="{{ ui('tabs', 'underline-list') }}" role="tablist">
    {% for panel in widget_data.panels %}
    <button type="button" role="tab" @click="active = {{ loop.index0 }}"
            :aria-selected="active === {{ loop.index0 }}"
            :class="active === {{ loop.index0 }} ? '{{ ui('tabs', 'underline-trigger-on') }}' : '{{ ui('tabs', 'underline-trigger-off') }}'"
            class="{{ ui('tabs', 'underline-trigger') }}">{{ _(panel.label) }}</button>
    {% endfor %}
  </div>
  {% for panel in widget_data.panels %}
  <div role="tabpanel" x-show="active === {{ loop.index0 }}"{% if not loop.first %} x-cloak{% endif %}>
    {% with widget_data = panel.widget.get_data() %}{% include panel.widget.template %}{% endwith %}
  </div>
  {% endfor %}
  {% else %}
  <p class="text-sm text-muted-foreground">{{ _("No panels configured.") }}</p>
  {% endif %}
</div>