define(['vue'], function(Vue){
	Vue.component('submit-buttons', {
		template: '<div class="btn-group">\
  					<button type="button" class="btn btn-primary" v-on:click="submit">Compute</button>\
  					<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">\
    					<span class="caret"></span>\
    					<span class="sr-only">Toggle Dropdown</span>\
  					</button>\
  					<ul class="dropdown-menu" role="menu">\
					    <li><a style="cursor: pointer;" v-on:click="clearTrajectories">Clear trajectories</a></li>\
					    <li><a style="cursor: pointer;" v-on:click="clearDrifters">Clear drifters</a></li>\
					    <li class="divider"></li>\
					    <li><a style="cursor: pointer;" v-on:click="downloadData">Download data</a></li>\
  					</ul>\
				   </div>',
		data: function(){
			return {
			}
		},
		methods: {
			submit: function(){
				this.$emit('form-submit', 'submit');
			},
			cancel: function(){
				this.$emit('form-submit', 'cancel');
			},
			clearTrajectories: function(){
				this.$emit('form-submit', 'clear-trajectories');
			},
			clearDrifters: function(){
				this.$emit('form-submit', 'clear-drifters');
			},
			downloadData: function(){
				this.$emit('form-submit', 'download-data');
			}
		}
	});
});