{% extends 'stela_control/base_list.html' %}
{% load static %}
{% load i18n %}
{% load humanize %}
{% load crispy_forms_tags %}
{% block title %}
            <h1 class="oxanium mx-4 text-dark pt-3"></h1>
{% endblock  %}
{% block side_title %}
            <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Users Control" %}</b></h3>
{% endblock  %}
{% block topButtons %}
    <div class="col-lg-2 col-md-6 my-4">
        <button type="submit" class="btn btn-danger btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
    </div>
{% endblock  %}
{% block listTitle %}
        <h3 class="text-center fw-bold oxanium fs-4 my-2">{% trans "Users List" %}</h3>
{% endblock  %}
{% block thead %}
    <th scope="col" style="width: 5%;">Id</th>
    <th scope="col" style="width: 7%;">{% trans "User" %}</th>
    <th scope="col" style="width: 15%;">{% trans "Email" %}</th>
    <th scope="col" style="width: 18%;">{% trans "Rol" %}</th>
    <th scope="col" style="width: 5%;">{% trans "Status" %}</th>
    <th scope="col" style="width: 5%;">{% trans "View" %}</th>
    <th scope="col" style="width: 20%;">{% trans "Created" %}</th>
    <th style="width: 5%;" class="text-center"> <input type="checkbox" id="parent"></th>                     
{% endblock  %} 
{% block tbody %}
        {% for get in users %}
            <tr>
                <td class="p-2">{{get.id}}</td>
                <td class="p-2">{{get.username}}</td>
                <td class="p-2">{{get.email}}</td>
                {% if get.is_superuser is True %}
                    <td class="p-2">{% trans "Superuser" %} <i class="fa-solid fa-user-shield color-stela"></i></td>
                {% else %}
                    <td class="p-2 text-left">{% trans "Linkzone User" %} <i class="fa-solid fa-user color-stela"></i></td>
                {% endif %}
                {% if get.is_active is True %}
                    <td class="p-2">{% trans "Active" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                {% else %}
                    <td class="p-2">{% trans "Inactive" %} <i class="fa-solid fa-circle-xmark color-red"></i></td>
                {% endif %}
                <td class="p-2"><a class="btn btn-shappire" href="users/{{get.id}}/"><i class="fa-solid fa-right-to-bracket"></i></a></td>
                <td class="p-2">{{get.created|naturaltime}}</td>
                <td class="text-center check-product"><input type="checkbox" class="child" name="product_id[]" value="{{get.id}}" id="delete_product"></td>
                <script>
                    const url = '/users-control'
                    $(function() {
                        $("#user").autocomplete({
                        appendTo: "#cage-search",
                        source: '/search-auto/user/',
                        minLenght: 3,
                        });
                        });
                    $(function(){
                        $('#parent').on('change',function(){
                            $('.child').prop('checked',$(this).prop('checked'));
                            var checkboxTrigger = document.getElementById("parent");
                            if (checkboxTrigger.checked== true)
                            document.getElementById('delete_btn').classList.remove('hide')
                            else{
                            document.getElementById('delete_btn').classList.add('hide')
                            }
                        });
                        $('.child').on('change',function(){
                            $('#parent').prop('checked',$('.child:checked').length ? true: false);
                            var checkboxTrigger = document.getElementById("parent");
                            if (checkboxTrigger.checked== true)
                            document.getElementById('delete_btn').classList.remove('hide')
                            else{
                            document.getElementById('delete_btn').classList.add('hide')
                            }
                        });
                    
                        });
                        
                        $(document).ready(function(){
                            $('#delete_btn').click(function(){
                                Swal.fire({
                                    title: confirmTitle,
                                    text: '{% trans "This option cannot be reversed!" %}',
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#050225',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: '{% trans "Yes, delete it!" %}',
                                    cancelButtonText: '{% trans "Cancel" %}'
                                    }).then((result) => {
                                    if (result.isConfirmed) {
                                        $('.child:checked').each(function(i){
                                            id[i]=$(this).val()
                                            }) 
                                            $.ajax({
                                                url:url,
                                                method:"POST",
                                                data:{
                                                    id,
                                                    csrfmiddlewaretoken:CSRF_TOKEN,
                                                    action: 'localuser'
                                                },
                                                success:function(json){
                                                    Swal.fire({
                                                        icon: 'success',
                                                        title: '{% trans "Selection removed." %}',
                                                        text:'{% trans "The records were erased." %}',
                                                        confirmButtonText: '{% trans "Continue" %}',
                                                        confirmButtonColor: '#050225',
                                                        })
                                                    window.location.replace(url)
                                                }
                                            }) 
                                    }
                                    })
                                })
                            });
                </script>
            </tr>  
        {% endfor %}  
{% endblock  %}
{% block addScript %}
<script src="{% static 'js/stela/users/user.js' %}"></script>
{% endblock  %}
