define(['vue', 'action/drifter'], function(Vue, DrifterAction){
	Vue.component('drifter-list', {
		props: ['drifters'],
		template: 	'<ul class="list-group">\
						<a v-for="drifter in drifters" class="list-group-item" @mouseover="mouseover(drifter)" v-bind:class="renderStatusClass(drifter)">\
							<div>{{renderLatLon(drifter)}}\
							<span v-if="drifter.getStatus()==\'pending\'" class="glyphicon glyphicon-refresh"></span>\
							<span v-if="drifter.getStatus()!==\'pending\'" class="glyphicon glyphicon-minus" v-on:click="removeDrifter(drifter)"></span>\
							</div>\
							<small v-if="drifter.getStatus()==\'fail\'">{{printErrorMessage(drifter)}}</small>\
						</a>\
					</ul>',
		methods: {
			mouseover: function(drifter){
				this.$emit('drifter-hover', drifter.getId());
			},
			renderLatLon: function(drifter){
				return Math.round(drifter.getLat()*1000)/1000 + ', ' + Math.round(drifter.getLon()*1000)/1000;
			},
			printErrorMessage: function(drifter){
				return drifter.getErrorMessage();
			},
			renderStatusClass: function(drifter){
				return {
					'list-group-item-success': drifter.getStatus() == 'success',
					'list-group-item-danger': drifter.getStatus() == 'fail'
				}
			},
			removeDrifter: function(drifter){
				DrifterAction.remove(drifter);
			}
		}
	});
});