{% set htmlId = _args.htmlId|default(token()) %}
{% set categories = _args.categories|default([]) %}
{% set title = _args.title %}
{% set form = _args.form %}
{% if categories is not empty %}
<nav class="module-menu" id="{{ htmlId }}">
<ul class="module-menu__items">
{% for category in categories %}
<li class="module-menu__item{% if loop.first %} active{% endif %}">
<a class="module-menu__item-link" href="#">{{ category }}</a>
</li>
{% endfor %}
</ul>
</nav>
{% inline_script %}
<script>
$(function () {
$('#{{ htmlId }}').on('click', 'li', function (e) {
var $target = $(e.currentTarget),
$delegate = $(e.delegateTarget),
category = $target.text().trim(),
$form = $('#{{ form.vars.id }}');
$delegate
.find('li')
.removeClass('active');
$target.addClass('active');
$form
.find('[data-cs-forms-section="'+category+'"]')
.show()
.end()
.find('[data-cs-forms-section]')
.not('[data-cs-forms-section="'+category+'"]')
.hide()
.end()
.end()
;
});
});
</script>
{% endinline %}
{% endif %}