( async function(){


    Vue.component('process-item',{
        props: ['index','process'],
        methods: {
            removeProcess : function ( e ) {
                e.preventDefault();
                this.$emit('remove-process-item', this.index );
            }
        },
        template : `
                 <div class="row">
                    <input hidden="hidden" v-bind:name="'processes[' + index + '].id'" v-bind:value="process.id" >
                    <div class="col-sm-3 form-group">
                        <label>Name</label>
                        <input class="form-control" v-bind:name="'processes[' + index + '].title'" v-model="process.title" required>
                    </div>
                    <div class="col-sm-6 form-group">
                        <label>Notes</label>
                        <input class="form-control" v-bind:name="'processes[' + index + '].notes'" v-model="process.notes">
                    </div>
                    <div class="col-sm-1 form-group" v-if="process.id == null || process.id == 0 " v-on:click="removeProcess">
                        <label class="d-block">&nbsp;</label>
                        <a href="#" title="Remove" class="btn btn-light text-left">
                            <i class="bi bi-trash"></i>
                        </a>
                    </div>
                 </div>
        `
    });


    let app = new Vue({
        el: '#processApp',
        data : {
            processWrapper : {},
            processes : []
        },
        methods : {
            addNewProcess : function (e){
                e.preventDefault();
                this.processes.push({
                    'id' : 0,
                    'title' : '',
                    'notes' : ''
                })
            },
            removeProcess : function( index ){
                this.processes.splice( index, 1 );
            }

        },
        mounted : function () {
            this.processWrapper = window.ctp.processWrapper;
            this.processes = this.processWrapper.processes;
        }
    });

})(jQuery);