{% load admin_static %}
<link rel="stylesheet" type="text/css" href="{% static 'dashboard/css/style.css' %}" />
<script src="{% static 'lemon/js/json2.js' %}" type="text/javascript"></script>
<script type="text/javascript">
  function storeState() {
    var columns = $('ul.dashboard_column').map(function () {
        return [$('li.widget_container', this).map(function () {
          return $(this).attr('widget');
        }).get()];
    }).get();
    $.ajax({
      url: "{% url admin:dashboard:store %}",
      type: "POST",
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({columns: columns})
    });
  }
  $(function () {
    $('.dashboard_column').sortable({
      forcePlaceholderSize: true,
      dropOnEmpty: true,
      placeholder: "widget_placeholder",
      handle: ".widget_container_header",
      connectWith: ".dashboard_column",
      stop: function (event, ui) { storeState(); }
    });
    $('.widget_container_menu').click(function () {
      var container = $(this).parents(".widget_container");
      var widget = container.attr("widget");
      $.ajax({
        url: "{% url admin:dashboard:delete_widget %}",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(widget),
        success: function () { container.detach(); }
      });
      return false;
    });
  });
</script>
<div id="dashboard" class="clearfix">
  {% for column in data.columns %}
    <ul id="dashboard_column_{{ forloop.counter }}" class="dashboard_column">
      {% for item in column %}
        <li id="{{ item.id }}" class="widget_container" widget="{{ item.name }}">
          <div class="widget_container_header">
            <span class="widget_container_title">{{ item.widget.title }}</span>
            <span class="widget_container_menu"></span>
          </div>
          <div id="{{ item.id }}_content" class="widget_container_content"><div>{{ item.content|safe }}</div></div>
        </li>
      {% endfor %}
    </ul>
  {% endfor %}
</div>
