{#def prefix, panels={} #}

<div {{ attrs.render(
  class="cd-example-tabs not-prose",
  data_component="ExampleTabs",
) }}>
  <TabGroup class="example-tabgroup">
    <TabList class="example-tablist" data-md-skip>
      {%- for text in panels.keys() %}
      <Tab
        class="example-tab"
        target={{ "ex-%s-%s" % (prefix, loop.index) }}
        selected={{ loop.index == 1 }}
      >{{ text }}</Tab>
      {%- endfor %}
    </TabList>
    {%- for name in panels.values() %}
    <TabPanel
      class="example-tabpanel"
      id={{ "ex-%s-%s" % (prefix, loop.index) }}
      hidden={{ loop.index != 1 }}
    >
      {{ catalog.irender(name) }}
    </TabPanel>
    {%- endfor %}
  </TabGroup>
</div>