{% macro onsTableOfContents(params) %}
    {% from "components/list/_macro.njk" import onsList %}
    {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
    {% from "components/button/_macro.njk" import onsButton %}

    <aside class="ons-table-of-contents-container" aria-label="{{ params.ariaLabelForAside | default('Table of contents') }}">
        {% if params.skipLink %}
            {{
                onsSkipToContent({
                    "url": params.skipLink.url,
                    "text": params.skipLink.text
                })
            }}
        {% endif %}

        <nav class="ons-table-of-contents" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
            <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
            {% set element = 'ol' if params.ordered else 'ul' %}
            {% set variant = null if params.ordered else 'dashed' %}
            {% if params.lists %}
                {% for list in params.lists %}
                    {% if list.listHeading %}
                        <h3 class="ons-u-fs-r ons-u-mb-2xs">
                            {{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:
                        </h3>
                    {% endif %}
                    {{
                        onsList({
                            "element": element,
                            "classes": 'ons-u-mb-l',
                            "variants": variant,
                            "itemsList": list.itemsList
                        })
                    }}
                {% endfor %}
            {% elif params.itemsList %}
                {{
                    onsList({
                        "element": element,
                        "classes": 'ons-u-mb-l',
                        "variants": variant,
                        "itemsList": params.itemsList
                    })
                }}
            {% endif %}
        </nav>

        {% if params.relatedLinks %}
            <nav
                class="ons-table-of-contents__related-links ons-u-pb-s ons-u-pt-l ons-u-mt-s"
                aria-label="{{ params.relatedLinks.ariaLabel | default('Related links') }}"
            >
                <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.relatedLinks.title }}</h2>

                {{
                    onsList({
                        "variants": 'bare',
                        "itemsList": params.relatedLinks.itemsList
                    })
                }}
            </nav>
        {% endif %}

        {% if params.button %}
            <div class="ons-table-of-contents__button ons-u-pt-l">
                {% set allVariants = ['small', 'secondary', 'print'] %}

                {{
                    onsButton({
                        "text": params.button.text | default('Save or print this page'),
                        "variants": allVariants
                    })
                }}
            </div>
        {% endif %}
    </aside>
{% endmacro %}