{% extends "_base.html" %}
{% load static %}


{% block styles %}
    {{ block.super }}
    <!-- DataTables -->
    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">

{% endblock styles %}

{% block ui_active_tab %}'configuration'{% endblock ui_active_tab %}
{% block page_header %}Configuration{% endblock page_header %}
{% block page_description %}{% endblock page_description %}

{% block title %}{{ block.super }} - Configuration{% endblock %}

{% block breadcrumb %}
    {% include "configuration/breadcrumb.html" %}
{% endblock breadcrumb %}

{% block maincontent %}

    <div>
        <div>
            <table id="table" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <hr/>

        </div>

    </div>
{% endblock maincontent %}

{% block scripts %}
    {{ block.super }}

    <script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>

    <script>
        $(function () {
            $(function () {
                var table = $('#table').DataTable({
                    serverSide: true,
                    processing: true,
                    ordering: false,
                    ajax: "{% url 'web.api.configuration_items' %}",
                    columns: [
                        {"data": "name"},
                        {"data": "value"},
                    ],
                });

                $('#table_filter').css("display", "none");
            });
        });
    </script>
{% endblock scripts %}