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

{% block title %}{% trans "Available Widgets" %}{% endblock %}
{% block extrastyle %}{{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'dashboard/css/style.css' %}" />
{% endblock %}
{% block extrahead %}{{ block.super }}
  <script src="{% static 'lemon/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 %}
