{% extends "base_top.html" %}
{% load staticfiles %}

{% block headMedia %}
    <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock %}

{% block messages %}
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-envelope-o"></i>
        <span class="label label-success">4</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 4 messages</li>
        <li>
            <!-- inner menu: contains the actual data -->
            <ul class="menu">
                <li><!-- start message -->
                    <a href="#">
                        <div class="pull-left">
                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                        </div>
                        <h4>
                            Support Team
                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                        </h4>
                        <p>Why not buy a new awesome theme?</p>
                    </a>
                </li>
                <!-- end message -->
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                        </div>
                        <h4>
                            AdminLTE Design Team
                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
                        </h4>
                        <p>Why not buy a new awesome theme?</p>
                    </a>
                </li>
            </ul>
        </li>
        <li class="footer"><a href="#">See All Messages</a></li>
    </ul>
{% endblock %}

{% block notifications %}
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-bell-o"></i>
        <span class="label label-warning">10</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 10 notifications</li>
        <li>
            <!-- inner menu: contains the actual data -->
            <ul class="menu">
                <li>
                    <a href="#">
                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
                    </a>
                </li>

                </li>
            </ul>
        </li>
        <li class="footer"><a href="#">View all</a></li>
    </ul>
{% endblock %}

{% block tasks %}
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-flag-o"></i>
        <span class="label label-danger">9</span>
    </a>
    <ul c{% load static %}lass="dropdown-menu">
        <li class="header">You have 9 tasks</li>
        <li>
            <!-- inner menu: contains the actual data -->
            <ul class="menu">
                <li><!-- Task item -->
                    <a href="#">
                        <h3>
                            Design some buttons
                            <small class="pull-right">20%</small>
                        </h3>
                        <div class="progress xs">
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                <span class="sr-only">20% Complete</span>
                            </div>
                        </div>
                    </a>
                </li>
                <!-- end task item -->
            </ul>
        </li>
        <li class="footer">
            <a href="#">View all tasks</a>
        </li>
    </ul>
{% endblock %}

{% block sidebar %}
    <div class="form-group">
        <br>
        <ul class="sidebar-menu" data-widget="tree">
            <li>
                <a class="treeview " href="{{ BASE_URL }}/catalog">
                    <i class="fa fa-map"></i>
                    <span>Home</span>
                    <span class="pull-right-container">
              <span class="label label-primary pull-right"></span>
            </span>
                </a>
            </li>
        </ul>
    </div>
    <!-- form-group-->
{% endblock %}

{% block user %}
    {% include "user_button.html" %}
{% endblock %}

{% block content %}
    <div class="wrapper" style="background-color: #ecf0f5;">
        <!-- Content Wrapper. Contains page content -->
        <!-- Main content -->
        <section class="content">
            <div class="panel panel-default">
                <div class="panel-heading">{{ Viewname }}</div>
                <div class="panel-body text-center">
                    <table data-toggle="table" id="example" class="table table-striped table-bordered"
                           style="width:100%">
                        <thead>
                        <th>Username</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>E-mail</th>
                        <th>Active</th>
                        <th>Staff</th>
                        <th>Super</th>
                        <th>Actions</th>
                        </thead>
                        <tbody>
                        {% for user in users %}
                            <tr>
                                <td>{{ user.username }}</td>
                                <td>{{ user.first_name }}</td>
                                <td>{{ user.last_name }}</td>
                                <td>{{ user.email }}</td>
                            <form method="post" action="update/">

                                {% csrf_token %}
                                <input type="hidden" name="user_id" value="{{ user.user_id }}">
                                <td>
                                    <input type="checkbox" name="is_active" value="1"
                                           {% if user.status == True %}checked{% endif %}>

                                </td>
                                <td>
                                    <input type="checkbox" name="is_staff" value="1"
                                           {% if user.staff == True %}checked{% endif %}>
                                </td>
                                <td>
                                    <input type="checkbox" name="is_superuser" value="1"
                                           {% if user.superuser == True %}checked{% endif %}>
                                </td>
                                <td>
                                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i></button>
                                    <a href="#" class="btn btn-danger"><i class="fa fa-trash"></i></a>
                                </td>
                            </form>
                            </tr> 
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
        <!-- Footer Elements -->
        <div class="container">
            <!-- Social buttons
            <ul class="list-unstyled list-inline text-center">
                <li class="list-inline-item">
                    <a class="btn-floating btn-fb mx-1">
                        <i class="fa fa-faceboo"> </i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn-floating btn-tw mx-1">
                        <i class="fa fa-twitter"> </i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn-floating btn-gplus mx-1">
                        <i class="fa fa-google-plus"> </i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn-floating btn-li mx-1">
                        <i class="fa fa-linkedin"> </i>
                    </a>
                </li>
                <li class="list-inline-item">
                    <a class="btn-floating btn-dribbble mx-1">
                        <i class="fa fa-dribbble"> </i>
                    </a>
                </li>
            </ul>
            <!-- Social buttons -->

        </div>
        <!-- Footer Elements -->

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3">© 2019 Copyright:
            <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
        </div>
        <!-- Copyright -->

    </footer>
    {% if messages %}
        <div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
            {% for message in messages %}
                <div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>{{ message.tags }}!</strong> {{ message }}.
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}

{% block templates %}{% include "templates.html" %}{% endblock %}
{% block scripts %}
    <script>
        $(document).ready(function () {
            $('#example').DataTable
            ({
                language:
                    {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ registros",
                        "sZeroRecords": "No se encontraron resultados",
                        "sEmptyTable": "Ningún dato disponible en esta tabla",
                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate":
                            {
                                "sFirst": "Primero",
                                "sLast": "Último",
                                "sNext": "Siguiente",
                                "sPrevious": "Anterior"
                            },
                        "oAria":
                            {
                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                            }
                    },
                responsive:
                    {
                        details:
                            {
                                type: 'column',
                                target: 'tr'
                            }
                    },
                columnDefs:
                    [{
                        className: 'control',
                        orderable: false,
                        targets: 0
                    }],
                order: [1, 'asc']
            });
        });
    </script>
{% endblock %}