{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{% trans "Available Widgets" %}{% endblock %}
{% block extrastyle %}{{ block.super }}
	<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}extradmin/css/dashboard.css" />
{% endblock %}
{% block extrahead %}{{ block.super }}
	<script src="{{ STATIC_URL }}extradmin/js/json2.js" type="text/javascript"></script>
{% endblock %}
{% block main-menu-status %}{% endblock %}

{% block content %}
	<script type="text/javascript">
		function remove(widget) {
			widget.detach();
			var left_height = $("#available_widgets_left li").length;
			var right_height = $("#available_widgets_right li").length;
			if (left_height - right_height == 2) {
				$("#available_widgets_left li").last().prependTo("#available_widgets_right");
			}
			else if ( right_height > left_height) {
				$("#available_widgets_right li").first().appendTo("#available_widgets_left");
			}
		}
		$(function () {
			$('a.add_widget').click(function () {
				var name = $(this).attr('widget');
				var $this = $(this);
				var success = function (result) {
					remove($this.parents("li.widget"));
				};
				console.log(JSON.stringify(name));
				$.ajax({
					url: "{% url admin:dashboard:add_widget %}",
					type: "POST",
					contentType: "application/json; charset=utf-8",
					data: JSON.stringify(name),
					success: success
				});
				return false;
			});
		});
	</script>
	<h1>{% trans "Available Widgets" %}</h1>
	<ul class="tools">
		<li><a href="{% url admin:index %}">{% trans "Control Panel" %}</a></li>
	</ul>
	{% if object_list %}
		{% for name, object in object_list.items %}
			{% if forloop.first %}<ul id="available_widgets_left" class="available_widgets">{% endif %}
			<li class="widget">
				<h2>{{ object.title }}</h2>
				<p>{{ object.description }}</p>
				<a href="" class="add_widget" widget="{{ name }}">{% trans "Add" %}</a>
			</li>
			{% if forloop.counter == forloop.revcounter or forloop.counter == forloop.revcounter0 and not forloop.last %}</ul><ul id="available_widgets_right" class="available_widgets">{% endif %}
			{% if forloop.last %}</ul>{% endif %}
		{% endfor %}
	{% endif %}
{% endblock %}