<table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr class="white" bgcolor="{{ config.vdarkborder }}">
		<td>
			<b>FAQ</b>
		</td>
		<td align="right">
			<a href="#" onclick="toggleAll(); return false;">Toggle all</a>
		</td>
		{% if canEdit %}
		<td style="width: 300px">
			Options
		</td>
		{% endif %}
	</tr>
	{% set i = 0 %}
	{% for faq in faqs %}
		{% set i = i + 1 %}
	<tr bgcolor="{{ getStyle(i) }}">
		<td colspan="2" style="cursor: pointer;" onclick="toggleVisibility('faq_{{ i }}'); return false;">
			<b>{{ faq.question|raw }}</b>

			<div id="faq_{{ i }}" style="display: none;">{{ faq.answer|raw }}</div>
		</td>
		{% if canEdit %}
			<td>
				<a href="?subtopic=faq&action=edit&id={{ faq.id }}" title="Edit">
					<img src="images/edit.png"/>Edit
				</a>
				<a id="delete" href="?subtopic=faq&action=delete&id={{ faq.id }}" onclick="return confirm('Are you sure?');" title="Delete">
					<img src="images/del.png"/>Delete
				</a>
				<a href="?subtopic=faq&action=hide&id={{ faq.id }}" title="{% if faq.hide != 1 %}Hide{% else %}Show{% endif %}">
					<img src="images/{% if faq.hide != 1 %}success{% else %}error{% endif %}.png"/>{% if faq.hide != 1 %}Hide{% else %}Show{% endif %}
				</a>
                {% if i != 1 %}
					<a href="?subtopic=faq&action=moveup&id={{ faq.id }}" title="Move up">
						<img src="images/icons/arrow_up.gif"/>Move up
					</a>
                {% endif %}
                {% if i != last %}
					<a href="?subtopic=faq&action=movedown&id={{ faq.id }}" title="Move down">
						<img src="images/icons/arrow_down.gif"/>Move down
					</a>
                {% endif %}
			</td>
		{% endif %}
	</tr>
	{% endfor %}
</table>

<script type="text/javascript">
	var expanded = false;

	function toggleVisibility(id)
	{
		var tmp = document.getElementById(id);
		if(tmp)
			tmp.style.display = tmp.style.display == 'none' ? '' : 'none';
	}

	function toggleAll()
	{
		for(i = 1; i < {{ i + 1 }}; i++)
		{
			document.getElementById('faq_' + i).style.display = expanded ? 'none' : '';
		}

		expanded = !expanded;
	}
</script>
