<h3>Panes</h3>

<p>
    Tabs can be associated with panes, which are sections of content that are
    displayed when a specific tab is active. To link a tab to a pane, you can
    use the <code>id</code> parameter
    for both the tab and the pane, ensuring they match. When a user clicks on a
    tab, the corresponding pane will be shown while hiding the others. This
    allows for an organized and interactive way to display different content
    sections without navigating away from the current page.
</p>

<p>
    Depending on implementation, theme may require <code>tab_wrapper</code> and <code>tab_pane_wrapper</code> to
    be placed inside <code>tabbed_content</code>
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- set first_pane_id = ui.util.id() -%}
        {%- set second_pane_id = ui.util.id() -%}
        {%- call ui.util.call(ui.tabbed_content) -%}
            {%- call ui.util.call(ui.tab_wrapper) -%}
                {{ ui.tab("Pane 1", active=true, id=first_pane_id) }}
                {{ ui.tab("Pane 2", id=second_pane_id) }}
            {%- endcall %}

            {%- call ui.util.call(ui.tab_pane_wrapper) -%}
                {{ ui.tab_pane(lipsum(1), active=true, id=first_pane_id) }}
                {{ ui.tab_pane(lipsum(1), id=second_pane_id) }}
            {%- endcall %}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}