{% block dj-mongo-rest-style %}
    <style>
        table {
            border: 1px solid #dddddd;
            width: 100%;
            margin-bottom: 20px;
            display: table;
            border-spacing: 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }

        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }

        td, th {
            display: table-cell;
            border-left: 1px solid #dddddd;
            padding: 8px;
            line-height: 20px;
            text-align: left;
            vertical-align: top;
            border-top: 1px solid #dddddd;
            word-wrap: break-word !important;
            word-break: break-all !important;
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }

        .pagination-right {
            text-align: right;
        }

        .pagination {
            margin: 20px 0;
        }

        .pagination ul {
            display: inline-block;
            margin: 0 !important;
            padding: 0;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        ul {
            padding: 0;
            margin: 0 0 10px 25px;
            list-style-type: disc;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 40px;
        }

        .pagination ul > li {
            display: inline;
            line-height: 20px;
        }

        .pagination a {
            color: #08c;
            text-decoration: none !important;
        }

        .pagination li.active a {
            color: #999999 !important;
            text-decoration: none !important;
        }

        .pagination li.disabled a {
            color: #999 !important;
            cursor: default !important;
            text-decoration: none !important;
            background-color: transparent !important;
        }

        .pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px;
        }

        .pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -moz-border-radius-topleft: 4px;
        }

        .pagination ul > li > a, .pagination ul > li > span {
            float: left;
            padding: 4px 12px;
            line-height: 20px;
            text-decoration: none;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            border-left-width: 0;
        }

        .pull-left {
            float: left;
        }

        #error_msg {
            color: red;
            font-size: 14px;
            font-weight: 600;
        }
        .pagination{
            margin: 0 !important;
        }

        .padding-top-6 {
            padding-top: 6px;
        }

    </style>
{% endblock %}
{% block dj-mongo-rest-extra-style %}
{% endblock %}

<script type='text/javascript'>
    var db = '{{db}}';
    var col = '{{col}}';
    var cmd = '{{cmd}}';
    var requestURL = '{% url 'dj-mongo-reader-col' db col %}';
    var rowcount = {{rowcount|default:"50"}};
    var criteria = {{criteria|safe|default:"{}"}};
    var sort = {{sort|safe|default:"{}"}};
    var columns = '{{columns}}';
    var columns_trans = {{columns_trans|safe|default:"{}"}};
</script>



{% block dj-mongo-rest-js-remote-lib %}
    {# overwrite the jquery and mustache url if necessary#}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
{% endblock %}

<script src="{{ STATIC_URL }}dj-mongo-reader/js/mongoreader.js"></script>
<script src="{{ STATIC_URL }}dj-mongo-reader/js/rendertable.js"></script>
{% block dj-mongo-rest-extra-js %}
{% endblock %}
{% block dj-mongo-rest-table %}
{% endblock %}