{% extends 'base.html' %}

{% load static %}
{% load humanize %}



{% block content %}
<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">User Details</h1>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-body mt-4">

                    <form action="{% url 'user-details'%}" method="GET">
                    <div class="row">

                        <input type="hidden" name = "per_page_count" id="per-page-count" value="{{default_per_page_count}}">

                        <div class="col-md-6">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">

                                        <div class="col-md-6">

                                            
                                            


                                        </div>

                                        <div class="col-md-6">

                                            <div class="mb-3 row">
                                                <label class="col-form-label col-sm-4 text-sm-end control-label">Given Name</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" name="given_name" placeholder="Given Name" value="{{default_given_name}}">
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-form-label col-sm-4 text-sm-end control-label">User Name</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" name="user_name" placeholder="User Name" value="{{default_user_name}}">
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">

                                            <div class="col-md-6">

                                                <div class="mb-3 row">
                                                    <label class="col-form-label col-sm-4 text-sm-end">System Role</label>
                                                    <div class="col-sm-8">
                                                    
                                                        <select class="form-select" name="system_role_id">
                                                            <option name="system_role" value="ALL">
                                                                ALL</option>

                                                            {% for system_role in system_roles %}
                                                            {% if system_role.id|slugify == default_system_role_id %}
                                                            <option name="system_role_id" value="{{system_role.id}}" selected>
                                                                {{system_role.role_name|upper}}</option>
                                                            {% else %}
                
                                                            <option name="system_role_id" value="{{system_role.id}}">
                                                                {{system_role.role_name|upper}}</option>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </select>

                                                    </div>
                                                </div>

                                                <div class="mb-3 row">
                                                    <label class="col-form-label col-sm-4 text-sm-end">Acount Status</label>
                                                    <div class="col-sm-8">
                                                        <select class="form-select" name="user_account_status">
                                                            {% for user_account_status in user_account_statuses %}
                                                            {% if user_account_status|lower == default_user_account_status|lower %}
                                                            <option name="user_account_status" value="{{user_account_status}}" selected>{{user_account_status}}
                                                            </option>
                                                            {% else %}
                                                            <option name="user_account_status" value="{{user_account_status}}">{{user_account_status}}
                                                            </option>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                                


                                            </div>

                                            <div class="col-md-6">

                                                
                                                <div class="text-sm-end">
                                                    <button type="submit" class="btn btn-primary btn-lg">Search</button>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                                
                        </div>
                    </div>
                    </form>

                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    
                    <div class="card-body">


                        <div class="dataTables_wrapper">

                            <div class="row">
                                <div class="col-md-6">

    
                                    <div class="dataTables_length" id="datatables-reponsive_length">
                                        
                                        <form id="per-page-count-hidden-form" action="{% url 'user-details'%}" method="GET">
                                            <label>Show 

                                                <select name="per_page_count" id="select-per-page-count" aria-controls="datatables-reponsive" class="form-select form-select-sm">
                                                    {% for option in per_page_selector %}
                                                    {% if option == default_per_page_count %}
                                                        <option value="{{option}}" selected>{{option}}</option>
                                                    {% else %}
                                                        <option value="{{option}}">{{option}}</option>
                                                    {% endif %}
                                                    {% endfor %}

                                                </select> entries
                                            </label>

                                            <input type="hidden" name = "given_name" id="given-name-hidden-input-tag" value="{{default_given_name}}">
                                            <input type="hidden" name = "user_name" id="user-name-hidden-input-tag" value="{{default_user_name}}">
                                            <input type="hidden" name = "system_role_id" id="system-role-id-hidden-input-tag" value="{{default_system_role_id}}">

                                            <input type="hidden" name = "user_account_status" id="user-account-status-hidden-input-tag" value="{{default_user_account_status}}">
                                            <input type="hidden" name = "start_index" id="start-index-hidden-input-tag" value="{{ page.start_index }}">
                                            
                                        </form>
                                   
                                    </div>
                                </div>
                            </div>


                        <table class="table table-responsive table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th></th>
                                    <th>Given Name</th>
                                    <th>Last Name (Sir Name)</th>
                                    <th>System Role</th>
                                    <th>Username</th>
                                    <th>Status</th>
                                    <th class="text-sm-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>


                                {% for user_profile in page %}
                                <tr>

                                        <td>{{ forloop.counter }}</td>
                                        {% if user_profile.profile_picture_url %}
                                        <td>
                                        <img src="{{user_profile.profile_picture_url}}" width="32" height="32"
                                            class="rounded-circle my-n1" alt="Avatar"></td>
                                        {% else %}
                                        <td><img src="{% static 'img/avatars/default-user.png' %}" width="32" height="32"
                                            class="rounded-circle my-n1" alt="Avatar"></td>
                                        {% endif %}

                                    

                                    <td>{{user_profile.user.first_name|upper}} {{user_profile.middle_name|upper}}</td>
                                    <td>{{user_profile.user.last_name|upper}}</td>

                                    <td>{{user_profile.system_role.role_name|upper}}</td>

                                    <td>{{user_profile.user.username}}</td>

                                    {% if user_profile.user.is_active %}
                                    <td><span class="badge bg-success">Active</span></td>

                                    {% else %}
                                    <td><span class="badge bg-danger">Inactive</span></td>

                                    {% endif %}

                                    <td class="text-sm-end">
                                        <a href="{% url 'view-user' user_profile.user.id %}" class="btn btn-primary btn-pill btn-sm" target="_blank">View</a>
                                    </td>

                                </tr>
                                {% endfor %}


                            </tbody>
                        </table>

                        <div class="row">
                            <div class="col-sm-12 col-md-5">
                                {% if has_entries %}
                                    {% if page|length == 1 %}
                                        <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.paginator.count }} entry</div>
                                    {% else %}
                                    <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries</div>
                                    {% endif %}
                                {% else %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite"><span class="text-danger">No entries</span></div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-2">
                                {% if has_entries %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">Page {{page.number}} of {{page.paginator.num_pages}}</div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-5">
                                <div class="dataTables_paginate paging_simple_numbers" id="datatables-reponsive_paginate">
                                    {% if has_entries %}
                                    <ul class="pagination">

                                        {% if page.has_previous %}

                                        <li class="paginate_button page-item previous" id="datatables-reponsive_previous">
                                            <a href="?page_number={{page.previous_page_number}}&per_page_count={{default_per_page_count}}&user_name={{default_user_name}}&given_name={{default_given_name}}&system_role_id={{default_system_role_id}}&user_account_status={{default_user_account_status}}" 
                                                                                                                                                        
                                            aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item previous disabled" id="datatables-reponsive_previous">
                                            <a href="" aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% endif %}

                                        {% for page_number in page_list %}
                                        {% if page_number == page.paginator.ELLIPSIS %}
                                            {{page_number}}
                                        {% else %}

                                            {% if page_number == page.number %}
                                                <li class="paginate_button page-item active">
                                                    <a href="#" aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% else %}
                                                <li class="paginate_button page-item">
                                                    <a href="?page_number={{page_number}}&per_page_count={{default_per_page_count}}&user_name={{default_user_name}}&given_name={{default_given_name}}&system_role_id={{default_system_role_id}}&user_account_status={{default_user_account_status}}" 
                                                    aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% endif %}


                                        {% endif %}
                                        {% endfor %}

                                        {% if page.has_next %}

                                        <li class="paginate_button page-item next" id="datatables-reponsive_next">
                                            <a href="?page_number={{page.next_page_number}}&per_page_count={{default_per_page_count}}&user_name={{default_user_name}}&given_name={{default_given_name}}&system_role_id={{default_system_role_id}}&user_account_status={{default_user_account_status}}" 
                                            aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item next disabled" id="datatables-reponsive_next">
                                            <a href="" aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% endif %}

                                    </ul>

                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</main>

<script src="{% static 'js/page-selection.js' %}"></script>

{% endblock %}