{% 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 %}
    {% include 'administration_aside.html' %}
{% 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">
                    <div class="row col-md-1 pull-right ">
                        <a class="btn btn-success btn-sm col-md-6 col-sm-6 col-xs-6 col-lg-6 col-xl-6">New</a>
                        <br>
                        <br>
                    </div>

                    <table data-toggle="table" id="example" class="table table-striped table-bordered"
                           style="width:100%">
                        <thead>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Acronym</th>
                        <th>Status</th>
                        <th>Actions</th>
                        </thead>
                        <tbody>
                        {% for platform in platforms %}
                            <tr>
                                <td>{{ platform.id }}</td>
                                <td>{{ platform.name }}</td>
                                <td>{{ platform.acronym }}</td>
                                <form method="post" action="{% url 'update' %}">

                                    {% csrf_token %}
                                    <input type="hidden" name="request_path" value="{{ request.path }}">
                                    <input type="hidden" name="user_id" value="{{ user.user_id }}">

                                    <td>
                                        <input type="checkbox" name="is_superuser" value="1"
                                               {% if not request.user.is_superuser %}disabled{% endif %}
                                               {% if platform.status == True %}checked{% endif %}>
                                    </td>
                                    <td>
                                        <button {% if not request.user.is_superuser %}disabled{% endif %} title="save" type="submit" class="btn btn-success"><i
                                                class="fa fa-save"></i></button>
                                    </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 %}