{% extends "base.html" %}
{% load static %}

{% block extra_css %}
<style>
    .hideCard {
        display: none; 
    }

    .hideModifyUserCard {
        display: none;
    }
</style>
{% endblock %}

{% block content %}

<div class="container-fluid">
    <div class="mainBodyDiv">
        <nav class="navbar navbar-expand-sm topbar fixed-top secondNavbarStyle">
            <div style="display:inline-block; margin-top:5px">
                <a href="#" onclick="toggleCard('#hideCard', 'hideCard')">Create User</a>&emsp;&emsp;
            </div>
        </nav>

        <div class='card mt-5 hideCard' id='hideCard'>
            <div class="card-header" style="background-color: black; color:#66F854;">
                Create New User
            </div>

            <div class="card-body">
                <div class="flexRowInlineBlockLeft">
                    <label for='insertDomainSelections' class='col-form-label'>Select domain memberships for new user:&ensp;&emsp; </label>
                    <div class="paddingTop7px" id="insertDomainSelections"></div>&emsp;
                </div>

                <div class="flexRowInlineBlockLeft">
                    <label id="insertSelectedDomainsLabel" for='insertSelectedDomains' class='col-form-label marginLeft40px'>Selected domains:&emsp; </label>
                    <div id='insertSelectedDomains' class="paddingTop7px"></div>
                </div>
                
                <br>
                <div class="flexRowInlineBlockLeft">
                    <label for='fullName' class='col-form-label'>Full Name:</label>&ensp;
                    <input type='text' id='fullName' class='form-control marginTop5px inputBoxWidth300px' />
                </div>

                <div class="flexRowInlineBlockLeft">
                    <label for='loginName' class='col-form-label'>Login Name:</label>&ensp;
                    <input type='text' id='loginName' class='form-control marginTop5px inputBoxWidth300px' />
                </div>
                
                <form>
                    <div class="flexRowInlineBlockLeft">
                        <label for='password' class='col-form-label'>Password:</label>&ensp;
                        <input type='password' id='password' class="form-control marginTop5px inputBoxWidth300px" autocomplete='no' /> &ensp;&ensp;
                        <span class="fa-solid fa-eye marginTop10px" onclick="viewPassword()"></span>
                    </div>
                </form>
                
                <div class="flexRowInlineBlockLeft">
                    <label for='email' class='col-form-label'>Email:</label>&ensp;
                    <input type='text' id='email' placeholder="Optional" class='form-control marginTop5px inputBoxWidth300px'>
                </div>

                <div class="pl-0 mt-1 form-check form-check-inline">
                    <input type="checkbox" id='sysAdmin' name='sysAdmin'>&emsp;
                    <label id="sysAdminLabel" for='sysAdmin' class='form-check-label'>System Admininister</label>
                </div>

            </div> <!-- card-body -->

            <div class="card-footer text-center" style="background-color: black; color:#66F854;">
                <button type="button" class="btn btn-sm btn-primary ml-2 col-1" onclick="addUser()">Add User</button>
                <button type="button" class="btn btn-sm btn-primary ml-2 col-1" color:white" onclick="clearFields()">Clear Fields</button>
                <button type="button" class="btn btn-sm btn-primary ml-2 col-1" onclick="closeForm()">Close Form</button>
            </div>
        </div>
        <!-- Create user card -->

        <div class='card mt-5 hideModifyUserCard' id='hideModifyUserCard'>
            <div class="card-header" id='modifyUserCardHeader' style="background-color: #081aa8; color:white;">
                Modify User:&ensp; 
            </div>

            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <label for='modifyLoginName' class='col-form-label'>Login Name:</label>
                    </div>
                    <div class="col-auto">
                        <input type='text' id='modifyLoginName' class='form-control' placeholder=''>
                    </div>

                    <div class="col-auto">
                        <label for='modifyPassword' class='col-form-label'>Password:</label>
                    </div>
                    
                    <div class="col-auto">
                        <form>
                            <div class="col-auto" style="display:flex; flex-direction:row; justify-content:center; align-items:center">
                                <input type='password' id='modifyPassword' class='form-control width300px' placeholder='' autocomplete='no'>&ensp;
                                <span class="fa-solid fa-eye" onclick="viewPassword()"></span>
                            </div>
                        </form>
                    </div>
                 
                    <div class="col-auto">
                        <label for='modifyEmail' class='col-form-label'>Email:</label>
                    </div>
                    <div class="col-3">
                        <input type='text' id='modifyEmail' class='form-control' placeholder=''>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-auto" style="display:flex; flex-direction:row; justify-content:center; align-items:center">
                        <div class="pl-2 form-check form-check-inline" style="inline:block">
                            System Admininister: &ensp;
                            <label for='modifySysAdminTrue' class='form-check-label'>Yes&ensp;</label>&ensp;
                            <input class="form-check-input" type="radio" id='modifySysAdminTrue' name='modifySysAdmin' value="true">&ensp;&ensp;&ensp;&ensp;
   
                            <label for='modifySysAdminFalse' class='form-check-label'>No&ensp;</label>
                            <input class="form-check-input" type="radio" id='modifySysAdminFalse' name='modifySysAdmin' value="false" checked>
                        </div>
                    </div>
                </div>

            </div> <!-- card-body -->

            <!-- Footer  id="hideCardFooter" -->
            <div class="card-footer text-center" style="background-color: #081aa8">
                <button type="button" class="btn btn-sm btn-primary ml-2 col-1" onclick="closeModifyUserForm()">Close Form</button>
                <button type="button" class="btn btn-sm btn-primary ml-2 col-1" onclick="modifyUser()">Modify User</button>
            </div>
        </div>
        <!-- Modify user card -->

        <div class="row mt-5">
            <input class="col-2 form-control" type="search" id="searchForUser" onkeyup="searchForUser()" placeholder="Search for user" title="Type in a name">&emsp;
        </div>

        <div class='row mt-3'>
            <!-- <table class="table table-sm table-bordered table-fixed tableFixHead tableMessages" id="userAccountTableData"> -->
            <table class="table tableFixHead2" id="userAccountTableData"> 
                <thead>
                    <tr>
                        <th scope="col">Delete</th>
                        <th scope="col">FullName</th>
                        <th scope="col">LoginName</th>
                        <th scope="col">Sys-Admin</th> 
                        <th scope="col">Domains</th>
                        <th scope="col">Email</th>
                        <th scope="col">Password</th>
                        <th scope="col">API-Key</th>
                    </tr>
                </thead>
            
                <tbody id="tableData"></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal" id="apiKeyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" 
    aria-labelledby="apiKey" aria-hidden="true"">
    <div class="modal-dialog modal-dialog-scrollable" style="max-width:50%; height: 400px; overflow:auto; color:black">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title" id="archiveResults">API-Key</h5>
            </div>

            <div class="modal-body">
                <div class='row mt-1' id="insertApiKey" style="margin-left:10px; display:inline-block">
                </div>

                <div id="getUser" user=""></div>

                <div class='row mt-5 col-3'>
                    <button type="button" style="margin-left:10px" class="btn btn-sm btn-outline-primary" onclick="regenerateApiKey()">Regenerate API-Key</button>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="addDomainsToExistingUsersModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" 
    aria-labelledby="addDomainsToExistingUsersModal" aria-hidden="true"">
    <div class="modal-dialog modal-dialog-scrollable" style="max-width:50%; height: 600px; overflow:auto; color:black">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title">Add Domains To Existing Users</h5>
            </div>

            <div class="modal-body">
                <div id="insertDomainSelectionForExistingUsers"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block extra_js %}
    <script type="module" src="{% static 'commons/js/accountMgmt.js' %}"></script>
{% endblock extra_js %}