( async function () {

    Vue.prototype.$roles = window.ctp.roles;
    Vue.prototype.$accounts = window.ctp.accounts;

    Vue.component('authority', {
        props : ['index', 'authority'],
        methods: {
            removeRole : function (e) {
                e.preventDefault();
                this.$emit('role-remove', this.index );
            }
        },
        template: `
           <div class="form-row">
                <input hidden="hidden" v-bind:name="'authorities[' + index + '].username'" v-bind:value="authority.username">
                <div class="col-sm-3 form-group">
                    <label>Role</label>
                    <select class="form-control" v-bind:name="'authorities[' + index + '].authority'" v-model="authority.authority" requried>
                        <option value="">Please Select</option>
                        <option v-for="(role,idx) in $roles"
                                v-bind:value="role"
                                v-bind:selected="role.authority === authority.username">{{role}}
                        </option>
                    </select>
                </div>
                <div class="col-sm-1 form-group" >
                    <label class="d-block">&nbsp;</label>
                    <a href="#" title="Remove" class="btn btn-light text-left" v-on:click="removeRole">
                        <i class="bi bi-trash"></i>
                    </a>
                  </div>
           </div>
        `
    });


    Vue.component('inventory-account',{
        props : ['index','account'],
        methods : {
            removeAccount : function (e){
                e.preventDefault();
                this.$emit('account-remove', this.index );
            }
        },
        template : `
        <div class="form-row">
                <input hidden="hidden" v-bind:name="'inventoryAccounts[' + index + '].username'" v-bind:value="account.username">
                <div class="col-sm-3 form-group">
                    <label>Account</label>
                    <select class="form-control" v-bind:name="'inventoryAccounts[' + index + '].accountId'" v-model="account.accountId" requried>
                        <option value="0">Please Select</option>
                        <option v-for="(acc,idx) in $accounts"
                                v-bind:value="acc.id"
                                v-bind:title="acc.notes"
                                v-bind:selected="acc.id === account.accountId">{{acc.title}}
                        </option>
                    </select>
                </div>
                <div class="col-sm-1 form-group" >
                    <label class="d-block">&nbsp;</label>
                    <a href="#" title="Remove" class="btn btn-light text-left" v-on:click="removeAccount">
                        <i class="bi bi-trash"></i>
                    </a>
                  </div>
           </div>
        `,
    });



    let app = new Vue({
        el: '#userApp',
        data: {
            user : {},
            authorities: [],
            inventoryAccounts: []
        },
        methods: {
            addRole: function (e) {
                e.preventDefault();
                this.authorities.push({
                    'username' : '',
                    'authority' : ''
                })
            },
            removeRole: function (idx) {
                this.authorities.splice(idx, 1);
            },
            addAccount: function (e) {
                e.preventDefault();
                this.inventoryAccounts.push({
                    'username' : '',
                    'accountId' : 0
                })
            },
            removeAccount: function (idx) {
                this.inventoryAccounts.splice(idx, 1);
            }
        },
        mounted: function () {
           this.user = window.ctp.user;
           this.authorities = this.user.authorities;
           this.inventoryAccounts = this.user.inventoryAccounts;
        }
    })


})
(jQuery);