{% extends "admin/change_list.html" %}

{% load admin_list %}
{% load thumbnail %}

{% block result_list %}
  {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
    <style>
      #upload-list {
        margin-left: 0;
      }
      #upload-list li {
        list-style-type: none;
        border: 1px solid lightgrey;
        margin: 2px;
        padding: 2px;
        float: left;
        cursor: pointer;
      }
      .frame {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 64px;
        height: 65px;
      }
      #upload-list li p {
        position: absolute;
        z-index: 2;
        padding: 2px;
        display: none;
        background: white;
        border: 1px solid black;
      }
      #upload-list li:hover p {
        display: block;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
      }
      #upload-list li.selected {
        margin: 1px;
        border: 2px solid #999;
        background: #ffc;
      }
    </style>
    <script>
      (function($) {
        $(document).ready(function() {
          $("#upload-list input").actions();

          $("#upload-list li").each(function() {
            if ($(this).find("input").is(":checked")) {
              $(this).addClass("selected")
            }
          })
        });
      })(django.jQuery);
    </script>
    {% if cl.result_list %}
      <ul id="upload-list">{% for result in cl.result_list %}
        <li>
          <div class="frame" onclick="django.jQuery(this).next().find('input').trigger('click')">
            <img src="{% thumbnail result.image "60x60" %}" alt>
          </div>
          <p>
            <input type="checkbox" name="_selected_action" value="{{ result.id }}"
            onclick="django.jQuery(this).parent().parent().toggleClass('selected')"/>
            <a href="{% url 'admin:uploader_imageupload_change' result.id %}">{{ result }}</a>
          </p>
        </li>{% endfor %}
      </ul>
      <br style="clear: left;" />
    {% endif %}
    {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
{% endblock %}