{% include 'navbar.html' %}
{% block content %}
{% load static %}
{%endblock%}
 <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <!-- users list start -->
                <section class="app-user-list">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">{{ all }}</h3>
                                        <span>Total Users</span>
                                    </div>
                                    <div class="avatar bg-light-primary p-50">
                                        <span class="avatar-content">
                                            <i data-feather="user" class="font-medium-4"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">
                                            {{ all }}

                                           </h3>
                                        <span>Paid Users</span>
                                    </div>
                                    <div class="avatar bg-light-danger p-50">
                                        <span class="avatar-content">
                                            <i data-feather="user-plus" class="font-medium-4"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">

                            <div class="card">

                                <div class="card-body d-flex align-items-center justify-content-between" data-clickable="true" data-href="http://google.com">
                                    <div>
                                        <h3 class="fw-bolder mb-75">19,860</h3>
                                        <span><a href="#" stretched-link>Active Users</span>
                                    </div></a>
                                    <div class="avatar bg-light-success p-50">
                                        <span class="avatar-content">
                                            <i data-feather="user-check" class="font-medium-4"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="card">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div>
                                        <h3 class="fw-bolder mb-75">237</h3>
                                        <span>Pending Users</span>
                                    </div>
                                    <div class="avatar bg-light-warning p-50">
                                        <span class="avatar-content">
                                            <i data-feather="user-x" class="font-medium-4"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- list and filter start -->
                    <div class="card">

                        <div class="card-body">
                        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
        <thead>
            <tr>
                                        <th>Id</th>
                                        <th>Username</th>
                                        <th>Expiration</th>
                                        <th>Update</th>
                                        <th>Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for all in radcheck_data %}
                                {% if all.attribute == "Expiration" %}
                                        <tr>
                                        <td>{{ all.id }}</td>
                                        <td>{{ all.username }}</td>
                                        <td>{{ all.value }}</td>
                                        <td><a href="{% url 'delete_user'%}" {{ a_c.id }} button type="button" class="btn btn-sm btn-warning" >Update</a></abutton></td>

                                        <td><a href="{% url 'delete_user'%}" {{ a_c.id }} button type="button" class="btn btn-sm btn-warning" ><i class="me-50" data-feather="x-circle"></i></a></abutton></td>

                                    </tr>
                                {%endif%}
                                {% endfor %}


                            </table>

        </tbody>

                        <script>
                            $(document).ready(function() {
                                $('#example').DataTable();
                            } );
                        </script>
                        <!-- Modal to add new user starts-->
                        <div class="modal modal-slide-in new-user-modal fade" id="modals-slide-in">
                            <div class="modal-dialog">
                                <form class="add-new-user modal-content pt-0">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                                    <div class="modal-header mb-1">
                                        <h5 class="modal-title" id="exampleModalLabel">Add User</h5>
                                    </div>
                                    <div class="modal-body flex-grow-1">
                                        <div class="mb-1">
                                            <label class="form-label" for="basic-icon-default-fullname">Full Name</label>
                                            <input type="text" class="form-control dt-full-name" id="basic-icon-default-fullname" placeholder="John Doe" name="user-fullname" />
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="basic-icon-default-uname">Username</label>
                                            <input type="text" id="basic-icon-default-uname" class="form-control dt-uname" placeholder="Web Developer" name="user-name" />
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="basic-icon-default-email">Email</label>
                                            <input type="text" id="basic-icon-default-email" class="form-control dt-email" placeholder="john.doe@example.com" name="user-email" />
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="basic-icon-default-contact">Contact</label>
                                            <input type="text" id="basic-icon-default-contact" class="form-control dt-contact" placeholder="+1 (609) 933-44-22" name="user-contact" />
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="basic-icon-default-company">Company</label>
                                            <input type="text" id="basic-icon-default-company" class="form-control dt-contact" placeholder="PIXINVENT" name="user-company" />
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="country">Country</label>
                                            <select id="country" class="select2 form-select">
                                                <option value="Australia">USA</option>
                                                <option value="Bangladesh">Bangladesh</option>
                                                <option value="Belarus">Belarus</option>
                                                <option value="Brazil">Brazil</option>
                                                <option value="Canada">Canada</option>
                                                <option value="China">China</option>
                                                <option value="France">France</option>
                                                <option value="Germany">Germany</option>
                                                <option value="India">India</option>
                                                <option value="Indonesia">Indonesia</option>
                                                <option value="Israel">Israel</option>
                                                <option value="Italy">Italy</option>
                                                <option value="Japan">Japan</option>
                                                <option value="Korea">Korea, Republic of</option>
                                                <option value="Mexico">Mexico</option>
                                                <option value="Philippines">Philippines</option>
                                                <option value="Russia">Russian Federation</option>
                                                <option value="South Africa">South Africa</option>
                                                <option value="Thailand">Thailand</option>
                                                <option value="Turkey">Turkey</option>
                                                <option value="Ukraine">Ukraine</option>
                                                <option value="United Arab Emirates">United Arab Emirates</option>
                                                <option value="United Kingdom">United Kingdom</option>
                                                <option value="United States">United States</option>
                                            </select>
                                        </div>
                                        <div class="mb-1">
                                            <label class="form-label" for="user-role">User Role</label>
                                            <select id="user-role" class="select2 form-select">
                                                <option value="subscriber">Subscriber</option>
                                                <option value="editor">Editor</option>
                                                <option value="maintainer">Maintainer</option>
                                                <option value="author">Author</option>
                                                <option value="admin">Admin</option>
                                            </select>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label" for="user-plan">Select Plan</label>
                                            <select id="user-plan" class="select2 form-select">
                                                <option value="basic">Basic</option>
                                                <option value="enterprise">Enterprise</option>
                                                <option value="company">Company</option>
                                                <option value="team">Team</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary me-1 data-submit">Submit</button>
                                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Modal to add new user Ends-->
                    </div>
                    <!-- list and filter end -->
                </section>
                <!-- users list ends -->

            </div>
        </div>
    </div>
    <!-- END: Content-->

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>

    <!-- BEGIN: Footer-->
    <footer class="footer footer-static footer-light">
        <p class="clearfix mb-0"><span class="float-md-start d-block d-md-inline-block mt-25">COPYRIGHT &copy; 2021<a class="ms-25" href="https://1.envato.market/pixinvent_portfolio" target="_blank">Pixinvent</a><span class="d-none d-sm-inline-block">, All rights Reserved</span></span><span class="float-md-end d-none d-md-block">Hand-crafted & Made with<i data-feather="heart"></i></span></p>
    </footer>
    <button class="btn btn-primary btn-icon scroll-top" type="button"><i data-feather="arrow-up"></i></button>
    <!-- END: Footer-->


    <!-- BEGIN: Vendor JS-->
    <!-- BEGIN Vendor JS-->

    <!-- BEGIN: Page Vendor JS-->
    <script src="{% static 'app-assets/vendors/js/forms/select/select2.full.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/datatables.buttons.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/jszip.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/pdfmake.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/vfs_fonts.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/buttons.html5.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/buttons.print.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/forms/validation/jquery.validate.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/forms/cleave/cleave.min.js'%}"></script>
    <script src="{% static 'app-assets/vendors/js/forms/cleave/addons/cleave-phone.us.js'%}"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Theme JS-->
    <script src="{% static 'app-assets/js/core/app-menu.js' %}"></script>
    <script src="{% static 'app-assets/js/core/app.js' % }"></script>
    <!-- END: Theme JS-->

    <!-- BEGIN: Page JS-->
    <script src="{% static 'app-assets/js/scripts/pages/app-user-list.js' %}"></script>
    <!-- END: Page JS-->

    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })
        $.fn.dataTable.ext.errMode = 'throw';
    </script>
</body>
<!-- END: Body-->

</html>