{% 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">
    <users ref="users" v-bind:users="users"></users>
</div>

{% endblock %}

{% block script %}

Vue.component('user',{
    props:['user'],
    template: `
    <tr>
        <!--
            :href="'{{ url_for('single_publisher_page', publisher_id='PUBLISHERID') }}'.replace('PUBLISHERID', publisher.publisher_id)"
        -->
        <td><a :href="'{{ url_for('settings_single_user_page', user_id='USERID') }}'.replace('USERID', user.id)">[[ user.id ]]</a></td>
        <td><a :href="'{{ url_for('settings_single_user_page', user_id='USERID') }}'.replace('USERID', user.id)">[[ user.username ]]</a></td>
        <td>[[ user.role ]]</td>
        <td>[[ user.age_rating_title.rating_long ]]</td>
    </tr>
    `,
    delimiters: ["[[","]]"]
})

Vue.component('users', {
    props:['users'],
    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>Users</h2>
                </div>
                <div class="col-sm-12 col-md-6 text-center text-md-end">
                    <a type="button" class="btn btn-info" href="{{ url_for('settings_new_user_page') }}">New User</a>
                </div>
            </div>
            <hr />
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scop="col">ID</th>
                            <th scop="col">Username</th>
                            <th scop="col">Role</th>
                            <th scop="col">Age Rating</th>
                        </tr>
                    </thead>
                    <tbody class="tablebody">
                        <user
                            v-for="user in users"
                            v-bind:user="user"
                            v-bind:key="user.id"
                        ></user>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    `,
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        users: [],
    },
    created() {
        this.getUsers()
    },
    methods: {
        getUsers() {
            console.log('Getting Users');
            axios.get('{{ url_for('api.api_get_users') }}', {
                params: {
                    offset: this.users.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.users.push(result)
                        })
                        if(this.users.length < res.data.number_of_total_results) {
                            this.getUsers()
                        }
                    }
                })
        },
    },
    delimiters: ["[[","]]"]
})

{% endblock %}