{% extends "auth/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
<div class="page-header">
    {% if "manage_user" in request.path %}
        <h1>Manage User {{ username }}</h1>
    {% else %}
        <h1>Create New User</h1>
    {% endif %}
</div>
<div class="container mt-5">

    <a href="{{ url_for('admin.manage_users') }}"><button type="button" class="btn btn-light btn-lg mb-3"><i class="fas fa-chevron-circle-left mr-3"></i>Users List</button></a>
    
    {% if "manage_user" in request.path %}
        <ul class="nav nav-tabs">
            <li class="nav-item">
            <a class="nav-link active" href="#">Manage User</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="/admin/manage_user/{{ user_id }}/delete">Remove User</a>
            </li>
        </ul>
    {% endif %}
    
    <form action method="post">
        {{ form.csrf_token }}
        <div class="card">
            <div class="card-header">
            User Account Information <span class="edit-section float-right" id="account-info-button"></span>
            </div>
            <div class="card-body" id="account-info">
            <h5 class="card-title">Username and Password</h5>
            {% if "manage_user" in request.path %}
            <p class="card-text font-weight-light font-italic">Change the username and/or password for user {{username}}.</p>
            <p><strong>Proceed with caution. This will affect the user's ability to log in.</strong></p>
            {% else %}
                <p class="card-text font-weight-light font-italic">Enter the username and a temporary password for the user. The user should change this on their first log in.</p>
            {% endif %}

            <div class="row">
                <div class="form-group col-sm-12">
                    {{ wtf.form_field(form.username, class='form-control', 
                        placeholder='New Username') }}
                    {% for error in form.username.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                </div>
                <div class="form-group col-sm-12 col-md-6">
                    {{ wtf.form_field(form.password, class='form-control', 
                        placeholder='Password') }}
                </div>
                <div class="form-group col-sm-12 col-md-6">
                    {{ wtf.form_field(form.password2, class='form-control', 
                        placeholder='Confirm Password') }}
                </div>
                <div class="col-md-12">
                    {% for error in form.password.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                </div>
            </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
            User Permissions <span class="edit-section float-right" id="permissions-button"></span>
            </div>
            <div class="card-body" id="permissions">
            <h5 class="card-title">User Groups and Roles</h5>
            <p class="card-text font-weight-light font-italic">Put the user into groups and add roles. Users will be able to see public jobs and projects by default.</p>
            <p class="card-text font-weight-light font-italic">You can manage and add groups on the <a href="/admin/manage_groups">Group Management</a> page.</p>
            <div class="row">
                <div class="form-group col-sm-12">
                    {% for error in form.roles.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                    {{ wtf.form_field(form.roles, class='form-control', 
                        placeholder='Choose User Roles') }}
                </div>
                <div class="form-group col-sm-12">
                    {% for error in form.groups.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                    {{ wtf.form_field(form.groups, class='form-control', 
                        placeholder='Choose User Groups') }}
                </div>
            </div>
            <h5 class="card-title">Special User Permissions</h5>
            <p class="card-text font-weight-light font-italic">Manage the user's special access to projects here. Project managers can also change this information for individual projects.</p>
            <div class="row card-body">
                <table class="table">
                    <tr>
                        <th>Project Name</th>
                        <th>read</th>
                        <th>update</th>
                        <th>create</th>
                        <th>delete</th>
                        <th>manage</th>
                    </tr>

                    {% for project in projects %}
                        <tr>  
                        <td>{{ project["name"] }}</td>
                            {% for permission in ["read", "update", "create", "delete", "manage"] %}
                                <td>
                                    {{ form["specialproject_"+project["id"]|string+"_"+permission] }}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </table>

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

        <div class="card" id="user-information">
            <div class="card-header">
            User Information <span class="edit-section float-right" id="user-information-button"></span>
            </div>
            <div class="card-body">
            <h5 class="card-title">Contact Information for the User</h5> 
            <p class="card-text font-weight-light font-italic">This contact information is not used by the SEAMM dashboard, but should be used by admin in order to contact users.</p>
            <div class="row">
                <div class="form-group col-sm-12 col-md-6">
                    {% for error in form.first_name.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                    {{ wtf.form_field(form.first_name, class='form-control', 
                        placeholder='First Name') }}
                </div>
                <div class="form-group col-sm-12 col-md-6">
                    {% for error in form.last_name.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                    {{ wtf.form_field(form.last_name, class='form-control', 
                        placeholder='Last Name') }}
                </div>
                <div class="form-group col-sm-12">
                    {% for error in form.email.errors %}
                        <div class="alert alert-danger">{{ error }} </div>
                    {% endfor %}
                    {{ wtf.form_field(form.email, class='form-control', 
                        placeholder='Email Address') }}
                </div>
            </div>
            </div>
        </div>
        <div class="mb-5"> 
            {{ wtf.form_field(form.submit, class="btn btn-primary form-control") }}
        </div>
    </form>
</div>

{% endblock %}

{% block scripts %}

<script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/popper.js/dist/umd/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/bootstrap/dist/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/all.min.js')}}"></script>

    <script src="{{ url_for('static', filename='js/timer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/setup.js') }}"></script>

{% if "manage_user" in request.path %}
    <script src="{{ url_for('static', filename='js/manage_user.js') }}"></script>
{% endif %}


<script>
    $("body").addClass('bg-white')
</script>
{% endblock %}
