{% load i18n placeholder_tags sekizai_tags %}
{% load url from future %}
{% load cms_tags %}

{% regroup object_list|dictsort:"category_id" by category as qgroups %}
{% for qgroup in qgroups %}
{% if list and title %}<h2>{{ qgroup.grouper }}</h2>{% endif %}
{% endfor %}

<ul class="faq-items">
	{% for qgroup in qgroups %}
	{% for question in qgroup.list %}
	<li{% if list %} class="faq-expandable"{% endif %}>
		{% if not list %}<a href="{{ qgroup.grouper.get_absolute_url }}" class="category">{{ qgroup.grouper }}</a>{% endif %}
		<a href="{% url 'aldryn_faq:faq-answer' question.category.slug question.pk %}" class="item">{% render_model question "title" %}</a>

		{% if list %}
		<div class="faq-detail"{% if list %} hidden="hidden"{% endif %}>
			{% if question.answer_text %}{% render_model question "answer_text" "answer_text" "" safe %}{% else %}{% trans "No answer available." %}{% endif %}
			{% if question.answer.cmsplugin_set.count %}
			<p><a href="{% url 'aldryn_faq:faq-answer' question.category.slug question.pk %}">{% trans "Read more" %}</a></p>
			{% endif %}
		</div>
		{% endif %}
	</li>
	{% endfor %}
	{% empty %}
	<li class="faq-empty"><p>{% trans "No entry found." %}</p></li>
	{% endfor %}
</ul>

{% if list and title %}
<p class="faq-back"><a href="../">{% trans "Back" %}</a></p>
{% endif %}

{% addtoblock "js" %}
<script>
jQuery(document).ready(function () {
	var triggers = $('.faq-expandable .item');
		triggers.on('click', function (e) {
			e.preventDefault();
			$(this).toggleClass('item-expanded')
				.parent().find('.faq-detail').slideToggle(300);
		});
});
</script>
{% endaddtoblock %}