{% extends "settings_page.html" %}

{% block header_script_files %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}

{% block settings_pane %}

<div id="app">
    <user ref="user" v-bind:user="user"></user>
    <modals v-bind:user="user"></modals>
</div>

{% endblock %}

{% block script %}

Vue.component('user', {
    props: ['user'],
    template: `
    <div class="row r-10 m-2">
        <div class="col col-12">
            <div class="row">
                <div class="col-sm-12 col-md-6 text-center text-md-start">
                    <h2>User - [[ user.username ]]</h2>
                </div>
                <div class="col-sm-12 col-md-6 text-center text-md-end">
                    {% if current_user.id|int == user_id|int %}
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#changePasswordModal">Change Password</button>
                    {% endif %}
                    {% if current_user.role == 'admin' %}
                    {% if current_user.id|int != user_id|int %}
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">Reset Password</button>
                    {% endif %}
                    {% if user_id|int != 1 %}
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteUserModal">Delete User</button>
                    {% endif %}
                    {% endif %}
                    <br />
                    <button type="button" class="btn btn-info my-1" data-bs-toggle="modal" data-bs-target="#editUserModal">Edit Account</button>
                </div>
            </div>
            <hr />
            <div class="row">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th scope="row">Username</th><td>[[ user.username ]]</td>
                        </tr>
                        <tr>
                            <th scope="row">Email</th><td>[[ user.email ]]</td>
                        </tr>
                        <tr>
                            <th scope="row">Role</th><td>[[ user.role ]]</td>
                        </tr>
                        <tr>
                            <th scope="row">Rating Allowed</th><td>[[ user.age_rating_title.rating_long ]]</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    `,
    delimiters: ["[[","]]"]
})

Vue.component('modals',{
    props: ['user'],
    template: `
    <div>
        {% if current_user.id|int == user_id|int %}
        <div class="modal" id="changePasswordModal" role="dialog" aria-labelledby="changePasswordModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            Change Password
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <form method="POST">
                    <div class="modal-body">

                        {{ change_password_form.csrf_token }}

                        <div class="mb-3">
                            {{ change_password_form.old_password.label }}
                            {{ change_password_form.old_password(type='password', class_='form-control', placeholder=change_password_form.old_password.label.text) }}
                        </div>
                        <div class="mb-3">
                            {{ change_password_form.new_password.label }}
                            {{ change_password_form.new_password(type='password', class_='form-control', placeholder=change_password_form.new_password.label.text) }}
                        </div>
                        <div class="mb-3">
                            {{ change_password_form.confirm_password.label }}
                            {{ change_password_form.confirm_password(type='password', class_='form-control', placeholder=change_password_form.confirm_password.label.text) }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        {{ change_password_form.update_password_button(class_='btn btn-success') }}
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                    </form>

                </div>
            </div>
        </div>
        {% endif %}
        {% if current_user.role == 'admin' %}
        {% if current_user.id|int != user_id|int %}
        <div class="modal" id="resetPasswordModal" role="dialog" aria-labelledby="resetPasswordModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            Change Password
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST">
                    <div class="modal-body">

                        {{ reset_password_form.csrf_token }}

                        <div class="mb-3">
                            {{ reset_password_form.password.label }}
                            {{ reset_password_form.password(type='password', class_='form-control', placeholder=reset_password_form.password.label.text) }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        {{ reset_password_form.reset_password_button(class_='btn btn-success') }}
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}
        {% if user_id|int != 1 %}
        <div class="modal" id="deleteUserModal" role="dialog" aria-labelledby="deleteUserModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            Delete User
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete user [[ user.username ]]?
                    </div>
                    <div class="modal-footer">
                        <form method="POST">
                            {{ delete_user_form.csrf_token }}
                            {{ delete_user_form.delete_user_button(class_='btn btn-success') }}
                        </form>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endif %}
        <div class="modal" id="editUserModal" role="dialog" aria-labelledby="editUserModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            Edit User
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <form method="POST">
                    <div class="modal-body">

                        {{ edit_user_form.csrf_token }}

                        <div class="mb-3">
                            {{ edit_user_form.email.label }}
                            {{ edit_user_form.email(class_='form-control', placeholder=edit_user_form.email.label.text) }}
                        </div>
                        {% if current_user.role == 'admin' %}
                        <div class="mb-3">
                            {{ edit_user_form.role.label }}
                            {{ edit_user_form.role(class_='form-control') }}
                        </div>
                        <div class="mb-3">
                            {{ edit_user_form.age_rating.label }}
                            {{ edit_user_form.age_rating(class_='form-control') }}
                        </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        {{ edit_user_form.edit_user_button(class_='btn btn-success') }}
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    `,
    methods: {},
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        user: []
    },
    created() {
        this.getUser()
    },
    methods: {
        getUser() {
            console.log('getting user')
            console.log('{{ user_id }}')
            axios.get('{{ url_for('api.api_get_single_user', user_id=user_id) }}')
                .then(res => {
                    this.user = res.data.results
                    
                    if(document.getElementById('email')){
                        document.getElementById('email').value = res.data.results.email;
                    }
                    if(document.getElementById('user_id')){
                        document.getElementById('user_id').value = res.data.results.id;
                    }
                    if(document.getElementById('reset_user_id')){
                        document.getElementById('reset_user_id').value = res.data.results.id;
                    }
                    if(document.getElementById('role')){
                        document.getElementById('role').value = res.data.results.role;
                    }
                    if(document.getElementById('age_rating')){
                        document.getElementById('age_rating').value = res.data.results.rating_allowed;
                    }
                })
        }
    },
    delimiters: ["[[","]]"]
})

{% endblock %}