{% include 'AdminTemplates/adminDash.html' %} {% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Users List</h4>
                <h6>Manage your Users</h6>
                <h7></h7>
            </div>
            <div class="page-btn">
                <a href="{% url 'Users' %}" class="btn btn-added"><img
                        src="{% static 'assets/img/icons/plus.svg' %}" alt="img" class="me-1">Add New Users</a>
            </div>
        </div>
        {% if added %}
        <h3 style="color: blue; font-size: 16px;"><span style="color: black;">Users </span> '{{added}}' <span
                style="color: black;"> is </span><span style="color: green;">Added</span></h3>
        {% endif %}
        {% if edited %}
        <h3 style="color: blue; font-size: 16px;"><span style="color: black;">Users </span> '{{edited}}' <span
                style="color: black;"> is </span><span style="color: green;">Modified</span></h3>
        {% endif %}
        {% if pro_deleted %}
        <h3 style="color: blue; font-size: 16px;"><span style="color: black;">Users </span>'{{pro_deleted}}' <span
                style="color: black;"> is </span><span style="color: red;">Deleted</span></h3>
        {% endif %}
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a class="btn btn-searchset"><img src="{% static 'assets/img/icons/search-white.svg' %}"
                                    alt="img"></a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    {% csrf_token %}
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th width="200px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for li in lists %}
                            <tr>
                                <td>{{ li.first_name }}</td>
                                <td class="text-muted">{{ li.username }}</td>
                                <td class="text-muted">{{ li.email }}</td>
                                <td class="text-muted">{{ li.account_type }}</td>
                                <td>
                                    <a href="{% url 'editUsers' li.id %}">
                                    <button class="btn btn-sm btn-success status edit" type="button">
                                        <span>Edit</span>
                                    </button></a>
                                    {% if li.status == 'Active' %}
                                    <button class="btn btn-sm btn-success status del" type="button"
                                        value="{{li.id}}">Active</button>
                                    {% else %}
                                    <button class="btn btn-sm btn-danger status del" type="button"
                                        value="{{li.id}}">Inactive</button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    $('table').on('click', 'button.del', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'deleteUsers' %}",
                data: {
                    gotid: $(this).attr('value'),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                }
            });
        }
    });

</script>
{% endblock body %}