{! admin/util/editable?url=/faq/category/edit !}

<p>
	<a href="/faq/add">{"Add question"}</a>
	&nbsp;|&nbsp;
	<a href="/faq/category/add">{"Add category"}</a>
	{% if User::require_acl ('settings') %}
	&nbsp;|&nbsp;
	<a href="/faq/settings">{"Settings"}</a>
	{% end %}
</p>

{% foreach all as category %}
	{% if category->id != 0 %}
		<h3 class="editable-text" id="{{category->id}}" data-delete="/faq/category/delete">{{category->name}}</h3>
	{% else %}
		<h3>{"Uncategorized"}</h3>
	{% end %}
	
	<ul class="sortable connected" data-category="{{ category->id }}">
	
	{% if is_array ($data->category->items) %}
		{% foreach category->items as faq %}

		<li id="{{ faq->id }}" data-category="{{ faq->category }}">
			<h5>Q. {{ faq->question }}</h5>
			<p class="faq-options">
				<a	href="/faq/edit?id={{ faq->id }}">{"Edit"}</a> |
				<a	href="/faq/delete"
					data-id="{{ faq->id }}"
					onclick="return $.confirm_and_post (this, '{"Are you sure you want to delete this question?"}')">{"Delete"}</a>
			</p>
			<p class="faq-answer">{{ faq->answer|strip_tags|trim|substr (%s, 0, 77) }}...</td>
		</li>
		{% end %}
	{% else %}
	<ul class="sortable conencted" data-category="0">
		
	</ul>
	{% end %}

	</ul>
{% end %}

<script>
$(function () {
	$('.sortable').sortable ({
		connectWith: '.connected',
		placeholder: 'placeholder',
		update: function () {
			var data = {
				list: $(this).sortable ('toArray'),
				category: $(this).data ('category')
			};

			$.ajax ({
				url: '/faq/sort',
				type: 'post',
				data: data,
				success: function () {
					$.add_notification ('Sorting order updated.');
				},
				error: function () {
					$.add_notification ('Failed to save the new sorting order.');
				}
			});
		}
	});
});
</script>

<style>
.sortable {
	list-style-type: none;
	margin-left: 0;
	padding: 1px 10px 5px 10px;
}

.sortable li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}

.sortable li h5 {
	margin-bottom: 0;
}

.sortable li h5:hover {
	cursor: move;
}

.faq-options,
.faq-answer {
	margin-bottom: 0;
}

.placeholder {
	display: block;
	height: 25px;
	width: 100%;
	background-color: #ddd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.connected {
	min-height: 25px;
	background-color: #eee;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
</style>