{% extends 'adminvisualsortable/sort-base.html' %}
{% load static %}
{% load admin_utils %}
{% block extra_style %}
<style>
{% for r in res %}
    {% if r.img == 'NOIMAGE' %}
    #bg-image-{{ r.obj.id }} {
        background-color: #c4dce8;
    }
    {% else %}
        {% if r.img %}
    #bg-image-{{ r.obj.id }} {
        background-image: url("{{ r.img.url }}");
    }
        {% else %}
    #bg-image-{{ r.obj.id }} {
        background-image: url("{% static 'adminvisualsortable/img/placeholder-image.png' %}");
    }
        {% endif %}
    {% endif %}
{% endfor %}
</style>
{% endblock %}
{% block cur_sorting_model %}Sorting for Model: <b>{{targetModel.name}}</b>{% endblock %}
{% block sort_info %}{{ parent_instance }}{% endblock %}
{% block breadcrumb %}<a href="{{ parent_instance|get_parent_admin_url_detail }}">Back to Admin Page ></a>{% if parent_is_sortable %} <a href="{{parent_sort_url}}">Sort {{ parentModel.verbose_name_plural }} Instances ></a>{% else %} <span>{{ parentModel.name }} Instance ></span>{% endif %} {% if parent_multi_inlines %}<a href="{{parent_pivot_url}}">Select Inlines to Sort for the {{ parentModel.name }} Instance ></a>{% endif %} <span>Sort {{ targetModel.name }} Instances</span>{% endblock %}

{% block main %}
<div class="sorter-cont">
    <div id="sortable-items-cont">
        {% for r in res %}
        <div class="dropzone" data-ord="{{r.ord}}" data-id="{{r.obj.id}}">
            <div class="drag-drop">
                <div id="bg-image-{{ r.obj.id }}" class="cover bg-image"></div>
                <div class="item-title">
                    <p class="item-title-int"> {{ r.obj }}</p>
                    <div class="item-title-action-cont">
                        <span class="idx-cont"><span class="live-ord" data-id="{{ r.obj.id }}">{{ r.ord }}</span></span>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
