{#
// inputs:
// - links: array
// - level: integer (default: 0)
#}

{% set level = level|default(0) %}

<ul class="mobile-links mobile-links--level--{{ level }}" {% if level == 0 %} data-collapse data-collapse-opened-class="mobile-links__item--open" {% endif %}>
    {% for link in links %}
        {% if link.type in ['link', 'button'] %}
            <li class="mobile-links__item" data-collapse-item>
                <div class="mobile-links__item-title">
                    <a {% if link.type == 'link' %} href="{{ link.url }}" {% else %} data-collapse-trigger {% endif %} class="mobile-links__item-link">{{ link.title }}</a>
                    {% if link.sub %}
                        <button class="mobile-links__item-toggle" type="button" data-collapse-trigger>
                            <svg class="mobile-links__item-arrow" width="12px" height="7px"><use xlink:href="images/sprite.svg#arrow-rounded-down-12x7"></use></svg>
                        </button>
                    {% endif %}
                </div>
                {% if link.sub %}
                    <div class="mobile-links__item-sub-links" data-collapse-content>
                        {% include '/header/mobile-links.twig' with {
                            links: link.sub,
                            level: level + 1
                        } %}
                    </div>
                {% endif %}
            </li>
        {% endif %}
        {% if link.type == 'divider' %}
            <li class="mobile-links__divider"></li>
        {% endif %}
    {% endfor %}
</ul>