{% extends "_page.html" %}
{%- block page_layout -%}sidebar-start{%- endblock %}

{%- block secondary_content -%}
    {%- call ui.util.call(ui.list) -%}
        {{ ui.list_item(ui.link(_("Accordion"), href="#accordion")) }}
        {{ ui.list_item(ui.link(_("Button Group"), href="#button-group")) }}
        {{ ui.list_item(ui.link(_("Card"), href="#card")) }}
        {{ ui.list_item(ui.link(_("Column"), href="#column")) }}
        {{ ui.list_item(ui.link(_("Container"), href="#container")) }}
        {{ ui.list_item(ui.link(_("List"), href="#list")) }}
        {{ ui.list_item(ui.link(_("Activity"), href="#activity")) }}
        {{ ui.list_item(ui.link(_("Facet"), href="#facet")) }}
        {{ ui.list_item(ui.link(_("License"), href="#license")) }}
        {{ ui.list_item(ui.link(_("Group"), href="#group")) }}
        {{ ui.list_item(ui.link(_("Organization"), href="#organization")) }}
        {{ ui.list_item(ui.link(_("Package"), href="#package")) }}
        {{ ui.list_item(ui.link(_("Resource"), href="#resource")) }}
        {{ ui.list_item(ui.link(_("User"), href="#user")) }}
        {{ ui.list_item(ui.link(_("Chart"), href="#chart")) }}
        {{ ui.list_item(ui.link(_("Code"), href="#code")) }}
        {{ ui.list_item(ui.link(_("Definition List"), href="#definition-list")) }}
        {{ ui.list_item(ui.link(_("Table"), href="#table")) }}
        {{ ui.list_item(ui.link(_("Avatar"), href="#avatar")) }}
        {{ ui.list_item(ui.link(_("Badge"), href="#badge")) }}
        {{ ui.list_item(ui.link(_("Button"), href="#button")) }}
        {{ ui.list_item(ui.link(_("Datetime"), href="#datetime")) }}
        {{ ui.list_item(ui.link(_("Divider"), href="#divider")) }}
        {{ ui.list_item(ui.link(_("Heading"), href="#heading")) }}
        {{ ui.list_item(ui.link(_("Icon"), href="#icon")) }}
        {{ ui.list_item(ui.link(_("Image"), href="#image")) }}
        {{ ui.list_item(ui.link(_("Link"), href="#link")) }}
        {{ ui.list_item(ui.link(_("Tag"), href="#tag")) }}
        {{ ui.list_item(ui.link(_("Video"), href="#video")) }}
        {{ ui.list_item(ui.link(_("Alert"), href="#alert")) }}
        {{ ui.list_item(ui.link(_("Confirm Modal"), href="#confirm-modal")) }}
        {{ ui.list_item(ui.link(_("Modal"), href="#modal")) }}
        {{ ui.list_item(ui.link(_("Popover"), href="#popover")) }}
        {{ ui.list_item(ui.link(_("Progress"), href="#progress")) }}
        {{ ui.list_item(ui.link(_("Spinner"), href="#spinner")) }}
        {{ ui.list_item(ui.link(_("Toast"), href="#toast")) }}
        {{ ui.list_item(ui.link(_("Tooltip"), href="#tooltip")) }}
        {{ ui.list_item(ui.link(_("Checkbox"), href="#checkbox")) }}
        {{ ui.list_item(ui.link(_("Extra Fields Collection"), href="#extra-fields-collection")) }}
        {{ ui.list_item(ui.link(_("Field Errors"), href="#field-errors")) }}
        {{ ui.list_item(ui.link(_("File Input"), href="#file-input")) }}
        {{ ui.list_item(ui.link(_("Form"), href="#form")) }}
        {{ ui.list_item(ui.link(_("Form Errors"), href="#form-errors")) }}
        {{ ui.list_item(ui.link(_("Input"), href="#input")) }}
        {{ ui.list_item(ui.link(_("Markdown"), href="#markdown")) }}
        {{ ui.list_item(ui.link(_("Radio"), href="#radio")) }}
        {{ ui.list_item(ui.link(_("Range Input"), href="#range-input")) }}
        {{ ui.list_item(ui.link(_("Select"), href="#select")) }}
        {{ ui.list_item(ui.link(_("Submit"), href="#submit")) }}
        {{ ui.list_item(ui.link(_("Textarea"), href="#textarea")) }}
        {{ ui.list_item(ui.link(_("Account"), href="#account")) }}
        {{ ui.list_item(ui.link(_("Footer"), href="#footer")) }}
        {{ ui.list_item(ui.link(_("Header"), href="#header")) }}
        {{ ui.list_item(ui.link(_("Subtitle Item"), href="#subtitle-item")) }}
        {{ ui.list_item(ui.link(_("Pagination"), href="#pagination")) }}
        {{ ui.list_item(ui.link(_("Search Active Filters"), href="#search-active-filters")) }}
        {{ ui.list_item(ui.link(_("Search Advanced Controls"), href="#search-advanced-controls")) }}
        {{ ui.list_item(ui.link(_("Search Form"), href="#search-form")) }}
        {{ ui.list_item(ui.link(_("Search Form Box"), href="#search-form-box")) }}
        {{ ui.list_item(ui.link(_("Search Input"), href="#search-input")) }}
        {{ ui.list_item(ui.link(_("Search Results Text"), href="#search-results-text")) }}
        {{ ui.list_item(ui.link(_("Search Sort Control"), href="#search-sort-control")) }}
        {{ ui.list_item(ui.link(_("Search Submit Button"), href="#search-submit-button")) }}
        {{ ui.list_item(ui.link(_("Search Pagination Info"), href="#search-pagination-info")) }}
        {{ ui.list_item(ui.link(_("Facet Section"), href="#facet-section")) }}
        {{ ui.list_item(ui.link(_("Sidebar Section"), href="#sidebar-section")) }}
        {{ ui.list_item(ui.link(_("Accordion Wrapper"), href="#accordion-wrapper")) }}
        {{ ui.list_item(ui.link(_("Account Nav Wrapper"), href="#account-nav-wrapper")) }}
        {{ ui.list_item(ui.link(_("Activity Wrapper"), href="#activity-list")) }}
        {{ ui.list_item(ui.link(_("Breadcrumb Wrapper"), href="#breadcrumb-wrapper")) }}
        {{ ui.list_item(ui.link(_("Content Action Wrapper"), href="#content-action-wrapper")) }}
        {{ ui.list_item(ui.link(_("Content Nav Wrapper"), href="#content-nav-wrapper")) }}
        {{ ui.list_item(ui.link(_("Dropdown Wrapper"), href="#dropdown-wrapper")) }}
        {{ ui.list_item(ui.link(_("Facet Wrapper"), href="#facet-list")) }}
        {{ ui.list_item(ui.link(_("Group Wrapper"), href="#group-list")) }}
        {{ ui.list_item(ui.link(_("Main Nav Wrapper"), href="#main-nav-wrapper")) }}
        {{ ui.list_item(ui.link(_("Nav Wrapper"), href="#nav-wrapper")) }}
        {{ ui.list_item(ui.link(_("Organization Wrapper"), href="#organization-list")) }}
        {{ ui.list_item(ui.link(_("Package Wrapper"), href="#package-list")) }}
        {{ ui.list_item(ui.link(_("Page Action Wrapper"), href="#page-action-wrapper")) }}
        {{ ui.list_item(ui.link(_("Resource Wrapper"), href="#resource-list")) }}
        {{ ui.list_item(ui.link(_("Tab Wrapper"), href="#tab-wrapper")) }}
        {{ ui.list_item(ui.link(_("User Wrapper"), href="#user-list")) }}
    {%- endcall %}
{%- endblock %}

{% block primary_content_inner %}

    {%- call ui.util.call(ui.section, title=_("Container components")) -%}
        <div>
            {{ ui.heading(_("Accordion"), level=3, attrs={"id": "accordion"}) }}

            {{ ui.heading(_("Simple accordion"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.accordion_wrapper) -%}
                        {%- call ui.util.call(ui.accordion, title="More Information") -%}
                            Detailed information about this section
                        {%- endcall %}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall %}

            {{ ui.accordion_wrapper(ui.accordion(content="Detailed information about this section", title="More Information")) }}
            {{ ui.divider() }}

            {{ ui.heading(_("Open accordion by default"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.accordion("This content is visible by default", title="Default Open", open=true) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.accordion(content="This content is visible by default", title="Default Open", open=true) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Button Group"), level=3, attrs={"id": "button-group"}) }}
            {{ ui.heading(_("Group of action buttons"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.button_group(
                        ui.button("Edit", href="/edit")
                        ~ ui.button("Delete", href="/delete", style="danger")
                        ) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.button_group(
                ui.button("Edit", href="/edit")
                ~ ui.button("Delete", href="/delete", style="danger")
                ) }}
            {{ ui.divider() }}

            {{ ui.heading(_("Group with vertical direction"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.button_group, direction="column") -%}
                        {{ ui.button("First") }}
                        {{ ui.button("Second") }}
                        {{ ui.button("Third") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.button_group, direction="column") -%}
                {{ ui.button("First") }}
                {{ ui.button("Second") }}
                {{ ui.button("Third") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Card"), level=3, attrs={"id": "card"}) }}
            {{ ui.heading(_("Basic card"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.card("Dataset description goes here", title="Dataset Title") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.card("Dataset description goes here", title="Dataset Title") }}
            {{ ui.divider() }}

            {{ ui.heading(_("Card with image"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.card("Description", title="Dataset Title", img="/path/to/image.jpg") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.card("Description", title="Dataset Title", img="/path/to/image.jpg") }}
            {{ ui.divider() }}

            {{ ui.heading(_("Card with link"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.card("Description", title="Dataset Title", href="/dataset/123") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.card("Description", title="Dataset Title", href="/dataset/123") }}
            {{ ui.divider() }}

            {{ ui.heading(_("Card with footer"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.card("Description", title="Dataset Title", footer="Updated: 2023-01-01") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.card("Description", title="Dataset Title", footer="Updated: 2023-01-01") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Column"), level=3, attrs={"id": "column"}) }}
            {{ ui.heading(_("Basic column"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.grid) -%}
                        {{ ui.column("Content in a column") }}
                    {%- endcall -%}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.grid) -%}
                {{ ui.column("Content in a column") }}
            {%- endcall -%}
            {{ ui.divider() }}

            {{ ui.heading(_("Column with responsive span"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.grid) -%}
                        {{ ui.column("Responsive column 1", span={"xs": 12, "md": 6, "lg": 4}) }}
                        {{ ui.column("Responsive column 2", span={"xs": 12, "md": 6, "lg": 4}) }}
                        {{ ui.column("Responsive column 3", span={"xs": 12, "md": 6, "lg": 4}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.grid) -%}
                {{ ui.column("Responsive column 1", span={"xs": 12, "md": 6, "lg": 4}) }}
                {{ ui.column("Responsive column 2", span={"xs": 12, "md": 6, "lg": 4}) }}
                {{ ui.column("Responsive column 3", span={"xs": 12, "md": 6, "lg": 4}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Container"), level=3, attrs={"id": "container"}) }}
            {{ ui.heading(_("Basic container"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.container("Content within a container") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.container("Content within a container") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("List"), level=3, attrs={"id": "list"}) }}
            {{ ui.heading(_("Basic list"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.list) -%}
                        {{ ui.list_item("First item") }}
                        {{ ui.list_item("Second item") }}
                        {{ ui.list_item("Third item") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.list) -%}
                {{ ui.list_item("First item") }}
                {{ ui.list_item("Second item") }}
                {{ ui.list_item("Third item") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Content components")) -%}
        <div>
            {{ ui.heading(_("Activity"), level=3, attrs={"id": "activity"}) }}
            {{ ui.heading(_("Basic activity"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.activity_list) -%}
                        {{ ui.activity("User created a new dataset", activity=activity_data) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.activity_list) -%}
                {{ ui.activity("User created a new dataset", activity={"user": "test_user", "activity_type": "new package", "data": {"package": {"title": "Test Dataset"}}}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Facet"), level=3, attrs={"id": "facet"}) }}
            {{ ui.heading(_("Basic facet component"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.facet_list) -%}
                        {{ ui.facet("My Organization", key="org", value="my-org", count=15) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.facet_list) -%}
                {{ ui.facet("My Organization", key="org", value="my-org", count=15) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("License"), level=3, attrs={"id": "license"}) }}
            {{ ui.heading(_("Basic license"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.license("Creative Commons Attribution", url="https://creativecommons.org/licenses/by/4.0/") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.license("Creative Commons Attribution", url="https://creativecommons.org/licenses/by/4.0/") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Group"), level=3, attrs={"id": "group"}) }}
            {{ ui.heading(_("Basic group"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.group_list) -%}
                        {{ ui.group(group={"name": "test-group", "title": "Test Group", "description": "A test group", "type": "group"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.group_list) -%}
                {{ ui.group(group={"name": "test-group", "title": "Test Group", "description": "A test group", "type": "group"}) }}
            {%- endcall -%}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Organization"), level=3, attrs={"id": "organization"}) }}
            {{ ui.heading(_("Basic organization"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.organization_list) -%}
                        {{ ui.organization(organization={"name": "test-org", "title": "Test Organization", "description": "A test organization", "type": "organization"}) }}
                    {%- endcall -%}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.organization_list) -%}
                {{ ui.organization(organization={"name": "test-org", "title": "Test Organization", "description": "A test organization", "type": "organization"}) }}
            {%- endcall -%}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Package"), level=3, attrs={"id": "package"}) }}
            {{ ui.heading(_("Basic package"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.package_list) -%}
                        {{ ui.package(package={"name": "test-dataset", "title": "Test Dataset", "description": "A test dataset", "type": "dataset"}) }}
                    {%- endcall -%}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.package_list) -%}
                {{ ui.package(package={"name": "test-dataset", "title": "Test Dataset", "description": "A test dataset", "type": "dataset"}) }}
            {%- endcall -%}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Resource"), level=3, attrs={"id": "resource"}) }}
            {{ ui.heading(_("Basic resource"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.resource_list) -%}
                        {{ ui.resource(resource={"name": "test-group", "id": "test-resource", "description": "A test group", "package_id": "test-package"}) }}
                    {%- endcall -%}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.resource_list) -%}
                {{ ui.resource(resource={"name": "test-group", "id": "test-resource", "description": "A test group", "package_id": "test-package"}) }}
            {%- endcall -%}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("User"), level=3, attrs={"id": "user"}) }}
            {{ ui.heading(_("Basic user"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.user_list) -%}
                        {{ ui.user(user={"name": "test-user", "fullname": "Test User", "id": "test-user"}) }}
                    {%- endcall -%}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.user_list) -%}
                {{ ui.user(user={"name": "test-user", "fullname": "Test User", "id": "test-user"}) }}
            {%- endcall -%}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Data components")) -%}
        <div>
            {{ ui.heading(_("Chart"), level=3, attrs={"id": "chart"}) }}
            {{ ui.heading(_("Basic chart"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.chart(data=[[1,2,3], [3,2,4]], type="bar") }}
                    {{ ui.chart(data=[[1,2,3], [3,2,4]], type="line") }}
                    {{ ui.chart(data=[1,2,3], type="pie") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.chart(data=[[1,2,3], [3,2,4]], type="bar") }}
            {{ ui.chart(data=[[1,2,3], [3,2,4]], type="line") }}
            {{ ui.chart(data=[1,2,3], type="pie") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Code"), level=3, attrs={"id": "code"}) }}
            {{ ui.heading(_("Basic code"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.code("print('Hello World')") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.code("print('Hello World')") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Definition List"), level=3, attrs={"id": "definition-list"}) }}
            {{ ui.heading(_("Basic definition list"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.definition_list([["Hello", "Praesent augue."], ["World", "Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus."]]) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.definition_list([["Hello", "Praesent augue."], ["World", "Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus."]]) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Table"), level=3, attrs={"id": "table"}) }}
            {{ ui.heading(_("Basic table"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.table, bordered=true, striped=true) -%}
                        {%- call ui.util.call(ui.table_head) -%}
                            {%- call ui.util.call(ui.table_row) -%}
                                {{ ui.table_cell("Header 1", is_header=true) }}
                                {{ ui.table_cell("Header 2", is_header=true) }}
                            {%- endcall %}
                        {%- endcall %}
                        {%- call ui.util.call(ui.table_body) -%}
                            {%- call ui.util.call(ui.table_row) -%}
                                {{ ui.table_cell("Cell 1") }}
                                {{ ui.table_cell("Cell 2") }}
                            {%- endcall %}
                        {%- endcall %}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.table, bordered=true, striped=true) -%}
                {%- call ui.util.call(ui.table_head) -%}
                    {%- call ui.util.call(ui.table_row) -%}
                        {{ ui.table_cell("Header 1", is_header=true) }}
                        {{ ui.table_cell("Header 2", is_header=true) }}
                    {%- endcall %}
                {%- endcall %}
                {%- call ui.util.call(ui.table_body) -%}
                    {%- call ui.util.call(ui.table_row) -%}
                        {{ ui.table_cell("Cell 1") }}
                        {{ ui.table_cell("Cell 2") }}
                    {%- endcall %}
                {%- endcall %}
            {%- endcall %}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Element components")) -%}
        <div>
            {{ ui.heading(_("Avatar"), level=3, attrs={"id": "avatar"}) }}
            {{ ui.heading(_("Avatar with user image"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.avatar(src="/path/to/user/image.jpg", alt="User Name") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.avatar(src="/path/to/user/image.jpg", alt="User Name") }}
            {{ ui.divider() }}

            {{ ui.heading(_("Avatar with fallback"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.avatar(alt="Default User") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.avatar(alt="Default User") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Badge"), level=3, attrs={"id": "badge"}) }}
            {{ ui.heading(_("Simple badge"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.badge("New") }}
                    {{ ui.badge("12") }}
                    {{ ui.badge("Active") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.badge("New") }}
            {{ ui.badge("12") }}
            {{ ui.badge("Active") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Button"), level=3, attrs={"id": "button"}) }}
            {{ ui.heading(_("Basic button"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.button("Primary Button", style="primary") }}
                    {{ ui.button("Secondary Button", style="secondary") }}
                    {{ ui.button("Link Button", href="/details") }}
                    {{ ui.button("Button with callback", type="submit", style="danger", attrs={"onclick": "return confirm('Are you sure?')"}) }}
                    {{ ui.button((ui.icon("plus") ~ " Add"), style="primary") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.button("Primary Button", style="primary") }}
            {{ ui.button("Secondary Button", style="secondary") }}
            {{ ui.button("Link Button", href="/details") }}
            {{ ui.button("Button with callback", type="submit", style="danger", attrs={"onclick": "return confirm('Are you sure?')"}) }}
            {{ ui.button((ui.icon("plus") ~ " Add"), style="primary") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Datetime"), level=3, attrs={"id": "datetime"}) }}
            {{ ui.heading(_("Basic datetime"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.datetime("2023-01-01T12:00:00Z") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.datetime("2023-01-01T12:00:00Z") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Divider"), level=3, attrs={"id": "divider"}) }}
            {{ ui.heading(_("Basic divider"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.divider() }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.divider() }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Heading"), level=3, attrs={"id": "heading"}) }}
            {{ ui.heading(_("Basic heading"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.heading("Main Heading", level=1) }}
                    {{ ui.heading("Sub Heading", level=2) }}
                    {{ ui.heading("Section Heading", level=3) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.heading("Main Heading", level=1) }}
            {{ ui.heading("Sub Heading", level=2) }}
            {{ ui.heading("Section Heading", level=3) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Icon"), level=3, attrs={"id": "icon"}) }}
            {{ ui.heading(_("Basic icon"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.icon("home") }}
                    {{ ui.icon("search") }}
                    {{ ui.icon("save") }}
                    {{ ui.icon("edit") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.icon("home") }}
            {{ ui.icon("search") }}
            {{ ui.icon("save") }}
            {{ ui.icon("edit") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Image"), level=3, attrs={"id": "image"}) }}
            {{ ui.heading(_("Basic image"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.image(src="/base/images/placeholder.jpg", alt="Sample image") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.image(src="/base/images/placeholder.jpg", alt="Sample image") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Link"), level=3, attrs={"id": "link"}) }}
            {{ ui.heading(_("Basic link"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.link("Sample Link", href="#") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.link("Sample Link", href="#") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Tag"), level=3, attrs={"id": "tag"}) }}
            {{ ui.heading(_("Basic tag"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.tag("Sample Tag") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.tag("Sample Tag") }}
            {{ ui.divider() }}

            {{ ui.heading(_("Tag with link"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.tag("Linked Tag", href="/tag/linked-tag") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.tag("Linked Tag", href="/tag/linked-tag") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Video"), level=3, attrs={"id": "video"}) }}
            {{ ui.heading(_("Basic video"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.video(src="/path/to/video.mp4", attrs={"width": "300"}) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.video(src="/base/images/placeholder.jpg", attrs={"width": "300"}) }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Feedback components")) -%}
        <div>
            {{ ui.heading(_("Alert"), level=3, attrs={"id": "alert"}) }}
            {{ ui.heading(_("Basic alert"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.alert("Operation completed successfully") }}
                    {{ ui.alert("This message can be dismissed", dismissible=true) }}
                    {{ ui.alert("Warning: Check your input", style="danger") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.alert("Operation completed successfully") }}
            {{ ui.alert("This message can be dismissed", dismissible=true) }}
            {{ ui.alert("Warning: Check your input", style="danger") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Confirm Modal"), level=3, attrs={"id": "confirm-modal"}) }}
            {{ ui.heading(_("Basic confirm modal"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {% call ui.util.call(ui.confirm_modal, title="Confirm Action", id="confirm-action") %}
                        <p>Are you sure you want to perform this action?</p>
                    {% endcall %}
                    {{ ui.modal_handle("Open", id="confirm-action") }}
                {%- endraw %}
            {%- endcall -%}
            {% call ui.util.call(ui.confirm_modal, title="Confirm Action", id="confirm-action") %}
                <p>Are you sure you want to perform this action?</p>
            {% endcall %}
            {{ ui.modal_handle("Open", id="confirm-action") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Modal"), level=3, attrs={"id": "modal"}) }}
            {{ ui.heading(_("Basic modal"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {% call ui.util.call(ui.modal, title="Modal Title", id="my-modal", footer=ui.modal_close_handle("Close", id="my-modal")) %}
                        Modal content goes here
                    {% endcall %}
                    {{ ui.modal_handle("Open", id="my-modal") }}
                {%- endraw %}
            {%- endcall -%}
            {% call ui.util.call(ui.modal, title="Modal Title", id="my-modal", footer=ui.modal_close_handle("Close", id="my-modal")) %}
                Modal content goes here
            {% endcall %}
            {{ ui.modal_handle("Open", id="my-modal") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Popover"), level=3, attrs={"id": "popover"}) }}
            {{ ui.heading(_("Basic popover"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {% call ui.util.call(ui.popover, title="Help Information", id="help-popover") %}
                        <p>This is helpful information about the current element.</p>
                    {% endcall %}
                    {{ ui.popover_handle("Show", id="help-popover") }}
                {%- endraw %}
            {%- endcall -%}
            {% call ui.util.call(ui.popover, title="Help Information", id="help-popover") %}
                <p>This is helpful information about the current element.</p>
            {% endcall %}
            {{ ui.popover_handle("Show", id="help-popover") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Progress"), level=3, attrs={"id": "progress"}) }}
            {{ ui.heading(_("Basic progress"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.progress(value=50, max=100) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.progress(value=50, max=100) }}
            {{ ui.divider() }}

            {{ ui.heading(_("Progress with label"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.progress("50%", value=50, max=100) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.progress("50%", value=50, max=100) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Spinner"), level=3, attrs={"id": "spinner"}) }}
            {{ ui.heading(_("Basic spinner"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.spinner() }}
                    {{ ui.spinner(size="lg") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.spinner() }}
            {{ ui.spinner(size="lg") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Toast"), level=3, attrs={"id": "toast"}) }}
            {{ ui.heading(_("Basic toast"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.toast("This is a toast message") }}
                    {{ ui.toast("Item saved", style="secondary") }}
                    {{ ui.toast("Informational message", dismissible=True) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.toast("This is a toast message") }}
            {{ ui.toast("Item saved", style="secondary") }}
            {{ ui.toast("Informational message", dismissible=True) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Tooltip"), level=3, attrs={"id": "tooltip"}) }}
            {{ ui.heading(_("Basic tooltip"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.tooltip("Info", tooltip="Additional information", position="top") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.tooltip("Info", tooltip="Additional information", position="top") }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Form components")) -%}
        <div>
            {{ ui.heading(_("Checkbox"), level=3, attrs={"id": "checkbox"}) }}
            {{ ui.heading(_("Basic checkbox"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.checkbox(name="terms", label="Accept terms", value="yes") }}
                    {{ ui.checkbox(label="Subscribe to newsletter", name="subscribe", checked=true) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.checkbox(name="terms", label="Accept terms", value="yes") }}
            {{ ui.checkbox(label="Subscribe to newsletter", name="subscribe", checked=true) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Extra Fields Collection"), level=3, attrs={"id": "extra-fields-collection"}) }}
            {{ ui.heading(_("Basic extra fields collection"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.extra_fields_collection(extras=[{"key": "field1", "value": "value1"}, {"key": "field2", "value": "value2"}]) }}            {%- endraw %}
            {%- endcall -%}
            {{ ui.extra_fields_collection(extras=[{"key": "field1", "value": "value1"}, {"key": "field2", "value": "value2"}]) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Field Errors"), level=3, attrs={"id": "field-errors"}) }}
            {{ ui.heading(_("Basic field errors"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.field_errors(errors=["This field is required"]) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.field_errors(errors=["This field is required"]) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("File Input"), level=3, attrs={"id": "file-input"}) }}
            {{ ui.heading(_("Basic file input"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.file_input(name="upload", label="Upload File") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.file_input(name="upload", label="Upload File") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Form"), level=3, attrs={"id": "form"}) }}
            {{ ui.heading(_("Basic form"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.form, action="/submit", method="post") -%}
                        {{ ui.input(name="name", label="Name", placeholder="Enter your name") }}
                        {%- call ui.util.call(ui.form_actions) -%}
                            {{ ui.submit("Save") }}
                            {{ ui.button("Cancel", style="secondary") }}
                        {%- endcall %}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.form, action="/submit", method="post") -%}
                {{ ui.input(name="name", label="Name", placeholder="Enter your name") }}
                {%- call ui.util.call(ui.form_actions) -%}
                    {{ ui.submit("Save") }}
                    {{ ui.button("Cancel", style="secondary") }}
                {%- endcall %}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Form Errors"), level=3, attrs={"id": "form-errors"}) }}
            {{ ui.heading(_("Basic form errors"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.form_errors(errors={"Name": "Name is required", "Email": "Invalid email format"}) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.form_errors(errors={"Name": "Name is required", "Email": "Invalid email format"}) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Input"), level=3, attrs={"id": "input"}) }}
            {{ ui.heading(_("Basic input"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.input(name="username", label="Username", placeholder="Enter username") }}
                    {{ ui.input(name="password", label="Password", type="password", placeholder="Enter password") }}
                    {{ ui.input(name="email", label="Email", type="email", placeholder="Enter email") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.input(name="username", label="Username", placeholder="Enter username") }}
            {{ ui.input(name="password", label="Password", type="password", placeholder="Enter password") }}
            {{ ui.input(name="email", label="Email", type="email", placeholder="Enter email") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Markdown"), level=3, attrs={"id": "markdown"}) }}
            {{ ui.heading(_("Basic markdown"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.markdown(name="description", label="Description", value="# Title\n\nContent here...", required=True) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.markdown(name="description", label="Description", value="# Title\n\nContent here...", required=True) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Radio"), level=3, attrs={"id": "radio"}) }}
            {{ ui.heading(_("Basic radio"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.radio(name="choice", label="Option 1", value="option1") }}
                    {{ ui.radio(name="choice", label="Option 2", value="option2", checked=true) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.radio(name="choice", label="Option 1", value="option1") }}
            {{ ui.radio(name="choice", label="Option 2", value="option2", checked=true) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Range Input"), level=3, attrs={"id": "range-input"}) }}
            {{ ui.heading(_("Basic range input"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.range_input(name="volume", min=0, max=100, value=50) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.range_input(name="volume", min=0, max=100, value=50) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Select"), level=3, attrs={"id": "select"}) }}
            {{ ui.heading(_("Basic select"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.select(name="country", label="Country", options=[{"value": "us", "text": "United States"}, {"value": "ca", "text": "Canada"}]) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.select(name="country", label="Country", options=[{"value": "us", "text": "United States"}, {"value": "ca", "text": "Canada"}]) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Submit"), level=3, attrs={"id": "submit"}) }}
            {{ ui.heading(_("Basic submit"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.submit("Submit Form") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.submit("Submit Form") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Textarea"), level=3, attrs={"id": "textarea"}) }}
            {{ ui.heading(_("Basic textarea"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.textarea(name="description", label="Description", placeholder="Enter description") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.textarea(name="description", label="Description", placeholder="Enter description") }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Meta components")) -%}
        <div>
            {{ ui.heading(_("Account"), level=3, attrs={"id": "account"}) }}
            {{ ui.heading(_("Basic account"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.account() }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.account() }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Footer"), level=3, attrs={"id": "footer"}) }}
            {{ ui.heading(_("Basic footer"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.footer() }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.footer() }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Header"), level=3, attrs={"id": "header"}) }}
            {{ ui.heading(_("Basic header"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.header(title="Title", subtitle="Subtitle") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.header(title="Title", subtitle="Subtitle") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Subtitle Item"), level=3, attrs={"id": "subtitle-item"}) }}
            {{ ui.heading(_("Basic subtitle item"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.subtitle_item("Subtitle content") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.subtitle_item("Subtitle content") }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Navigation components")) -%}
        <div>
            {{ ui.heading(_("Pagination"), level=3, attrs={"id": "pagination"}) }}
            {{ ui.heading(_("Basic pagination"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.pagination(page=1, total=10) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.pagination(page=1, total=10) }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Search components")) -%}
        <div>
            {{ ui.heading(_("Search Active Filters"), level=3, attrs={"id": "search-active-filters"}) }}
            {{ ui.heading(_("Basic search active filters"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_active_filters(
                        active_filters=[],
                        facet_titles={"organization": "Organization", "format": "Format"}
                        facets={"format": {"items": []}, "organization": {"items": []}},
                        ) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_active_filters(
                active_filters=[],
                facet_titles={"organization": "Organization", "format": "Format"},
                facets={"format": {"items": []}, "organization": {"items": []}},
                ) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Advanced Controls"), level=3, attrs={"id": "search-advanced-controls"}) }}
            {{ ui.heading(_("Basic search advanced controls"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_advanced_controls() }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_advanced_controls() }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Form"), level=3, attrs={"id": "search-form"}) }}
            {{ ui.heading(_("Basic search form"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_form(
                        query="search term",
                        count=25,
                        active_filters={},
                        facets={},
                        facet_titles={},
                        use_htmx=false
                        ) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_form(
                query="search term",
                count=25,
                active_filters={},
                facets={},
                facet_titles={},
                use_htmx=false
                ) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Form Box"), level=3, attrs={"id": "search-form-box"}) }}
            {{ ui.heading(_("Basic search form box"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.search_form_box) -%}
                        {{ ui.search_input(name="q", value="") }}
                        {{ ui.search_submit_button("Search") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.search_form_box) -%}
                {{ ui.search_input(name="q", value="") }}
                {{ ui.search_submit_button("Search") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Input"), level=3, attrs={"id": "search-input"}) }}
            {{ ui.heading(_("Basic search input"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_input(name="q", value="search term", placeholder="Search...") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_input(name="q", value="search term", placeholder="Search...") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Results Text"), level=3, attrs={"id": "search-results-text"}) }}
            {{ ui.heading(_("Basic search results text"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_results_text(count=25) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_results_text(count=25) }}
            {{ ui.divider() }}

            {{ ui.heading(_("Search results text with query error"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_results_text(count=0, error="Invalid search query") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_results_text(count=0, error="Invalid search query") }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Sort Control"), level=3, attrs={"id": "search-sort-control"}) }}
            {{ ui.heading(_("Basic search sort control"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_sort_control(selected="relevance", options=[{"text": "Relevance", "value": "relevance"}, {"text": "Date", "value": "date"}]) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_sort_control(selected="relevance", options=[{"text": "Relevance", "value": "relevance"}, {"text": "Date", "value": "date"}]) }}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Search Submit Button"), level=3, attrs={"id": "search-submit-button"}) }}
            {{ ui.heading(_("Basic search submit button"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.search_submit_button("Search") }}
                    {{ ui.search_submit_button((ui.icon("search") ~ " Search")) }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.search_submit_button("Search") }}
            {{ ui.search_submit_button((ui.icon("search") ~ " Search")) }}
            {{ ui.divider() }}
        </div>

    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Section components")) -%}
        <div>
            {{ ui.heading(_("Facet Section"), level=3, attrs={"id": "facet-section"}) }}
            {{ ui.heading(_("Basic facet section"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.facet_section, title="Organization") -%}
                        {%- call ui.util.call(ui.facet_list, title="Organization") -%}
                            {{ ui.facet("Government", key="org", value="gov", count=15) }}
                        {%- endcall %}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.facet_section, title="Organization") -%}
                {%- call ui.util.call(ui.facet_list, title="Organization") -%}
                    {{ ui.facet("Government", key="org", value="gov", count=15) }}
                {%- endcall %}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Sidebar Section"), level=3, attrs={"id": "sidebar-section"}) }}
            {{ ui.heading(_("Basic sidebar section"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {{ ui.sidebar_section("Sidebar content") }}
                {%- endraw %}
            {%- endcall -%}
            {{ ui.sidebar_section("Sidebar content") }}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

    {%- call ui.util.call(ui.section, title=_("Wrapper components")) -%}
        <div>
            {{ ui.heading(_("Accordion Wrapper"), level=3, attrs={"id": "accordion-wrapper"}) }}
            {{ ui.heading(_("Basic accordion wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.accordion_wrapper) -%}
                        {{ ui.accordion("First section content", title="First Section") }}
                        {{ ui.accordion("Second section content", title="Second Section") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.accordion_wrapper) -%}
                {{ ui.accordion("First section content", title="First Section") }}
                {{ ui.accordion("Second section content", title="Second Section") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Account Nav Wrapper"), level=3, attrs={"id": "account-nav-wrapper"}) }}
            {{ ui.heading(_("Basic account nav wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.account_nav_wrapper) -%}
                        {{ ui.account_nav_item("Profile", href="/profile") }}
                        {{ ui.account_nav_item("Settings", href="/settings", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.account_nav_wrapper) -%}
                {{ ui.account_nav_item("Profile", href="/profile") }}
                {{ ui.account_nav_item("Settings", href="/settings", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Activity Wrapper"), level=3, attrs={"id": "activity-list"}) }}
            {{ ui.heading(_("Basic activity wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.activity_list) -%}
                        {{ ui.activity("User created a dataset", activity=activity_data) }}
                        {{ ui.activity("User updated profile", activity=activity_data2) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.activity_list) -%}
                {{ ui.activity("User created a dataset", activity={"user": "test_user", "activity_type": "new package", "data": {"package": {"title": "Test Dataset"}}}) }}
                {{ ui.activity("User updated profile", activity={"user": "test_user", "activity_type": "updated profile", "data": {"user": {"name": "test_user"}}}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Breadcrumb Wrapper"), level=3, attrs={"id": "breadcrumb-wrapper"}) }}
            {{ ui.heading(_("Basic breadcrumb wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.breadcrumb_wrapper) -%}
                        {{ ui.breadcrumb("Home", href="/", initial=true) }}
                        {{ ui.breadcrumb("Section", href="/section") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.breadcrumb_wrapper) -%}
                {{ ui.breadcrumb("Home", href="/", initial=true) }}
                {{ ui.breadcrumb("Section", href="/section") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Content Action Wrapper"), level=3, attrs={"id": "content-action-wrapper"}) }}
            {{ ui.heading(_("Basic content action wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.content_action_wrapper) -%}
                        {{ ui.content_action("Edit", href="/edit") }}
                        {{ ui.content_action("Delete", href="/delete") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.content_action_wrapper) -%}
                {{ ui.content_action("Edit", href="/edit") }}
                {{ ui.content_action("Delete", href="/delete") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Content Nav Wrapper"), level=3, attrs={"id": "content-nav-wrapper"}) }}
            {{ ui.heading(_("Basic content nav wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.content_nav_wrapper) -%}
                        {{ ui.content_nav_item("About", href="/about") }}
                        {{ ui.content_nav_item("Resources", href="/resources", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.content_nav_wrapper) -%}
                {{ ui.content_nav_item("About", href="/about") }}
                {{ ui.content_nav_item("Resources", href="/resources", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Dropdown Wrapper"), level=3, attrs={"id": "dropdown-wrapper"}) }}
            {{ ui.heading(_("Basic dropdown wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.dropdown, title="Dropdown") -%}
                        {{ ui.dropdown_item("Option 1", href="/option1") }}
                        {{ ui.dropdown_item("Option 2", href="/option2", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.dropdown, title="Dropdown") -%}
                {{ ui.dropdown_item("Option 1", href="/option1") }}
                {{ ui.dropdown_item("Option 2", href="/option2", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Facet Wrapper"), level=3, attrs={"id": "facet-list"}) }}
            {{ ui.heading(_("Basic facet wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.facet_list) -%}
                        {{ ui.facet("Organization", key="org", value="my-org", count=15) }}
                        {{ ui.facet("Format", key="format", value="csv", count=8) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.facet_list) -%}
                {{ ui.facet("Organization", key="org", value="my-org", count=15) }}
                {{ ui.facet("Format", key="format", value="csv", count=8) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Group Wrapper"), level=3, attrs={"id": "group-list"}) }}
            {{ ui.heading(_("Basic group wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.group_list) -%}
                        {{ ui.group(group={"name": "test-group", "title": "Test Group", "description": "A test group", "type": "group"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.group_list) -%}
                {{ ui.group(group={"name": "test-group", "title": "Test Group", "description": "A test group", "type": "group"}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Main Nav Wrapper"), level=3, attrs={"id": "main-nav-wrapper"}) }}
            {{ ui.heading(_("Basic main nav wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.main_nav_wrapper) -%}
                        {{ ui.main_nav_item("Datasets", href="/dataset") }}
                        {{ ui.main_nav_item("Organizations", href="/organization", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.main_nav_wrapper) -%}
                {{ ui.main_nav_item("Datasets", href="/dataset") }}
                {{ ui.main_nav_item("Organizations", href="/organization", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Nav Wrapper"), level=3, attrs={"id": "nav-wrapper"}) }}
            {{ ui.heading(_("Basic nav wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.nav_wrapper) -%}
                        {{ ui.nav_item("Home", href="/") }}
                        {{ ui.nav_item("About", href="/about", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.nav_wrapper) -%}
                {{ ui.nav_item("Home", href="/") }}
                {{ ui.nav_item("About", href="/about", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Organization Wrapper"), level=3, attrs={"id": "organization-list"}) }}
            {{ ui.heading(_("Basic organization wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.organization_list) -%}
                        {{ ui.organization(organization={"name": "test-organization", "title": "Test Organization", "description": "A test organization", "type": "organization"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.organization_list) -%}
                {{ ui.organization(organization={"name": "test-organization", "title": "Test Organization", "description": "A test organization", "type": "organization"}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Package Wrapper"), level=3, attrs={"id": "package-list"}) }}
            {{ ui.heading(_("Basic package wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.package_list) -%}
                        {{ ui.package(package={"name": "test-dataset", "title": "Test Dataset", "description": "A test dataset", "type": "dataset"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.package_list) -%}
                {{ ui.package(package={"name": "test-dataset", "title": "Test Dataset", "description": "A test dataset", "type": "dataset"}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Page Action Wrapper"), level=3, attrs={"id": "page-action-wrapper"}) }}
            {{ ui.heading(_("Basic page action wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.page_action_wrapper) -%}
                        {{ ui.page_action("Add Dataset", href="/dataset/new") }}
                        {{ ui.page_action("Create Group", href="/group/new") }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.page_action_wrapper) -%}
                {{ ui.page_action("Add Dataset", href="/dataset/new") }}
                {{ ui.page_action("Create Group", href="/group/new") }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Resource Wrapper"), level=3, attrs={"id": "resource-list"}) }}
            {{ ui.heading(_("Basic resource wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.resource_list) -%}
                        {{ ui.resource(resource={"name": "test-group", "id": "test-resource", "description": "A test group", "package_id": "test-package"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.resource_list) -%}
                {{ ui.resource(resource={"name": "test-group", "id": "test-resource", "description": "A test group", "package_id": "test-package"}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("Tab Wrapper"), level=3, attrs={"id": "tab-wrapper"}) }}
            {{ ui.heading(_("Basic tab wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.tab_wrapper) -%}
                        {{ ui.tab("Tab 1", href="/tab1") }}
                        {{ ui.tab("Tab 2", href="/tab2", active=true) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.tab_wrapper) -%}
                {{ ui.tab("Tab 1", href="/tab1") }}
                {{ ui.tab("Tab 2", href="/tab2", active=true) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>

        <div>
            {{ ui.heading(_("User Wrapper"), level=3, attrs={"id": "user-list"}) }}
            {{ ui.heading(_("Basic user wrapper"), level=4) }}
            {%- call ui.util.call(ui.code, language="jinja2", dedent=true) -%}
                {%- raw %}
                    {%- call ui.util.call(ui.user_list) -%}
                        {{ ui.user(user={"name": "test-user", "fullname": "Test User", "id": "test-user"}) }}
                    {%- endcall %}
                {%- endraw %}
            {%- endcall -%}
            {%- call ui.util.call(ui.user_list) -%}
                {{ ui.user(user={"name": "test-user", "fullname": "Test User", "id": "test-user"}) }}
            {%- endcall %}
            {{ ui.divider() }}
        </div>
    {%- endcall %}

{% endblock %}