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

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}"/>
    {% if cl.formset %}
        <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>
    {% endif %}
    {% if cl.formset or action_form %}
        <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
    {% endif %}
    {{ media.css }}
    {% if not actions_on_top and not actions_on_bottom %}
        <style>
            #changelist table thead th:first-child {
                width: inherit
            }
        </style>
    {% endif %}
    
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
    <div class="row mb-2">
        <div class="col-sm-6">
            <h2>{{title}}</h2>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{% url 'admin:index' %}"><i class="fas fa-tachometer-alt"></i> {% trans 'Home' %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a></li>
                <li class="breadcrumb-item active">{{ cl.opts.verbose_name_plural|capfirst }}</li>  
            </ol>
        </div>
    </div>    
    {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}

{% block content %}
    <div id="content-main" class="container-fluid">
        {% if cl.formset.errors %}
            <p class="errornote">
                {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}
                    {% trans "Please correct the errors below." %}{% endif %}
            </p>
            {{ cl.formset.non_form_errors }}
        {% endif %}
        <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
            <div class="row p-2">
            
            {% block search %}{% search_form cl %}{% endblock %}
            <!--  -->
            {% block object-tools %}
            <div class="col-md-{% if cl.has_filters %}4{% else %}4{% endif %}">
                    {% if cl.has_filters %}
                    <span class="float-sm-right">
                            <a href="#"
                            class="btn btn-success btn-sm text-light ml-2" data-toggle="collapse" data-target="#changelist-filter" aria-expanded="false" aria-controls="changelist-filter">
                                <i class="fas fa-filter"></i>
                                {% trans 'Filter' %}
                            </a>
                        </span>
                        {% endif %}
                    {% block object-tools-items %}
                        {% if has_add_permission %}
                            <span class="float-sm-right">
                                {% url cl.opts|admin_urlname:'add' as add_url %}
                                <a href="{% add_preserved_filters add_url is_popup to_field %}"
                                class="btn btn-primary btn-sm text-light">
                                    <i class="fas fa-plus"></i>
                                    {% blocktrans with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktrans %}
                                </a>
                            </span>
                        {% endif %}
                    {% endblock %}
            </div>
            {% endblock %}
            
        </div>
            <!--  -->
            {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %}

            {% block filters %}
                {% if cl.has_filters %}
                    <div id="changelist-filter" class="collapse" >
                        <h2>{% trans 'Filter' %}</h2>
                        {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
                    </div>
                {% endif %}
            {% endblock %}

            <form id="changelist-form" method="post"{% if cl.formset.is_multipart %}
                  enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
                {% if cl.formset %}
                    <div>{{ cl.formset.management_form }}</div>
                {% endif %}

                {% block result_list %}
                    {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                    {% result_list cl %}
                    {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                {% endblock %}
                 {% block pagination %}{% pagination cl %}{% endblock %}
            </form>
        </div>
    </div>
{% endblock %}


{% block extra_js %}
<script src="{% static 'admin-lte/plugins/datatables/jquery.dataTables.js' %}"></script>
<script src="{% static 'admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.js' %}"></script>
<script>

$(function () {
  $('#result_list').DataTable(
   {
      "paging": false,
//       "lengthChange": false,
//       "searching": false,
//       "ordering": true,
//       "info": true,
//       "autoWidth": false,
     });
  });
  

</script>

<script>
    $(document).ready(function(){
        $.each($('#result_list_wrapper').children().filter(':last-child').children(), function( k, v ) {
            v.remove();
        });
        $('.card').append($('<div class="card-footer"></div>'));
        $('.card-footer').append($('.paginator'));
        $('.card-footer').addClass('text-center')
        $('.paginator').addClass('col-md-12');

        // moving actions div to the header of datatable
        try{
            $('.dataTables_wrapper :first-child :first-child')[0].remove();
            $actions = $('.actions');
            $actions.addClass('col-sm-6 col-md-6');
            $actions.prependTo($('.dataTables_wrapper :first-child')[0]);
        }catch(err){
            // so no data yet 
        }

});

</script>
{% endblock %}