{% extends '@nucleus/partials/particle.html.twig' %}

{% block stylesheets %}
	{% if particle.enabled %}
		{{ parent() }}
		<style type="text/css">
			{%- for item in particle.items -%}
				{%- if item.collapsed|default('true') == 'true' -%}
					body #{{ item.sectionid|e }} {
						display: none;
					}
				{%- endif -%}
			{%- endfor -%}
		</style>
	{% endif %}
{% endblock %}

{% block javascript_footer %}
	{% if particle.enabled %}
		{% do gantry.load('jquery') %}
		{{ parent() }}
		<script type="text/javascript">
			{%- for item in particle.items -%}
                {% set attr_extra_item = '' %}
                {% for extra in item.extra %}
                    {% set attr_extra_item = attr_extra_item ~ ' ' ~ extra|keys|first|e ~ '="' ~ extra|values|first|e('html_attr') ~ '"' %}
                {% endfor %}

				(function($) {
					$(document).ready(function() {
						if( $('#{{ item.sectionid|e }}').length ) {
							var section = $('#{{ item.sectionid|e }}');
							var toggleText = $('<div class="g-collapsible-section{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}><div class="g-toggle-text">{% if item.icon %}<span class="{{ item.icon|e }}"><\/span>{% endif %}{{ item.toggletext|default("Click to expand")|e('js') }}<\/div><\/div>');

							$(section).before(toggleText);
							$(toggleText).on("click", function(){
								$(section).slideToggle();
							});
						}
					});
				})(jQuery);
			{%- endfor -%}
		</script>
	{% endif %}
{% endblock %}