{% import "Toucan/macros/master.html" as master with context %}
{% import "Toucan/macros/forms.html" as f with context %}

{% if user.is_deleted %}
    {{ master.alert("This user account is DELETED", "danger") }}

{% elif not user.active %}
    {{ master.alert("This user account is DEACTIVATED", "warning") }}
{% endif %}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">INFO</h3>
  </div>
  <div class="panel-body">

    <table class="table table-bordered">
        <tbody>

            <tr>
                <td>ID</td>
                <td>{{ user.id }}</td>
            </tr>
            <tr>
                <td>First Name</td>
                <td>{{ user.first_name | default("", true)}}</td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td>{{ user.last_name  | default("", true) }}</td>
            </tr>
            <tr>
                <td>Email</td>
                <td>{{ user.email }}</td>
            </tr>
            <tr>
                <td>Signup Method</td>
                <td>{{ user.signup_method }}</td>
            </tr>
            <tr>
                <td>Last Login</td>
                <td>{{ user.last_login }}</td>
            </tr>
            <tr>
                <td>Signup Date</td>
                <td>{{ user.created_at }}</td>
            </tr>
            <tr>
                <td>Roles</td>
                <td>{{ user.role.name | capitalize}}</td>
            </tr>
            <tr>
                <td>Is Active</td>
                <td>{{ user.active | bool_to_yes }}</td>
            </tr>
            <tr>
                <td>Is Deleted</td>
                <td>{{ user.is_deleted | bool_to_yes }}</td>
            </tr>
        </tbody>

    </table>

    <div>
        <button class="btn btn-primary "
                data-toggle="modal"
                data-target="#modal-edit-user"
                ><i class="fa fa-user"></i> Edit Account</button>

        <button id="btn-reset-password" class="btn btn-default"><i class="fa fa-key"></i> Send Password Reset</button>

        <div class="clearfix"></div>
    </div>

  </div>
</div>

<!-- Reset password -->
<form id="form-reset-password" method="POST" action="{{url_for('UserAdmin:reset_password')}}">
    <input type="hidden" name="id" value="{{ user.id }}">
</form>


<!-- MODAL: EDIT USER -->
<div class="modal fade" id="modal-edit-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

  <form method="POST" action="{{url_for('UserAdmin:post')}}">

    {{- f.csrf_field() -}}
    <input type="hidden" name="id" value="{{ user.id }}">
    <input type="hidden" name="action" value="udpate">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit User Info</h4>
      </div>
      <div class="modal-body">
            <div class="form-group">
                <label>Email</label>
                <input type="text" class="form-control"  name="email" placeholder="Email" value="{{user.email}}">
            </div>


            <div class="form-group">
                <label>First Name</label>
                <input type="text" class="form-control"  name="first_name" placeholder="Name" value="{{ user.first_name | default("", true) }}">
            </div>

            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control"  name="last_name" placeholder="Name" value="{{ user.last_name | default("", true) }}">
            </div>

            {% if current_user.id != user.id %}
            <div class="form-group">
                <label>User Role</label>
                {{ f.tag('radio', 'user_role', options=user_roles_options, checked=[user.role.id]) }}
            </div>
            {% endif %}

      </div>

      <div class="modal-footer">
        {% if not user.active %}
        <button type="button" class="btn btn-info pull-left activate-btn" data-dismiss="modal"> Activate Account</button>
        {% else %}
        <button type="button" class="btn btn-warning pull-left deactivate-btn" data-dismiss="modal"> De-Activate Account</button>
        {% endif %}

        {% if not user.is_deleted %}
        <button type="button" class="btn btn-danger pull-left delete-btn" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
        {% else %}
        <button type="button" class="btn btn-info pull-left undelete-btn" data-dismiss="modal"> UNDelete</button>
        {% endif %}

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> SAVE</button>
      </div>
    </div>

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


<script>
    $(function(){


        // Will automatically fill the form
        var modalEU = $("#modal-edit-user")
        modalEU.on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var modal = $(this)
        })

        modalEU.find("button.delete-btn").click(function(){
            if(confirm("Do you want to DELETE this user's account ?")) {
                modalEU.find("input[name='action']").val("delete")
                modalEU.find("form").submit()
            }
        })
        modalEU.find("button.undelete-btn").click(function(){
            if(confirm("Do you want to UNDELETE this user's account ?")) {
                modalEU.find("input[name='action']").val("undelete")
                modalEU.find("form").submit()
            }
        })
        modalEU.find("button.deactivate-btn").click(function(){
            if(confirm("Do you want to DEACTIVATE this user's account ?")) {
                modalEU.find("input[name='action']").val("deactivate")
                modalEU.find("form").submit()
            }
        })

        modalEU.find("button.activate-btn").click(function(){
            if(confirm("Do you want to ACTIVATE this user's account ?")) {
                modalEU.find("input[name='action']").val("activate")
                modalEU.find("form").submit()
            }
        })

        $("#btn-reset-password").click(function(){
            if (confirm("Do you want to reset the user's password ?")) {
                $("#form-reset-password").submit()
            }
        })
    })

</script>

