<link rel="import" href="../../../polymer/polymer.html">
<polymer-element name="column-filters" attributes="filters filterOps columns">
	<template>
		<template repeat="{{filter in filters}}">
			<select value="{{filter.column}}" on-change="{{refresh}}">
				<option value="">-</option>
				<template repeat="{{column in columns}}">
					<option value="{{column.name}}">{{column.text}}</option>
				</template>
			</select>
			<select value="{{filter.op}}" on-change="{{refresh}}">
				<template repeat="{{filterOp in getFilterOps(filterOps)}}">
					<option value="{{filterOp.op}}">{{filterOp.title}}</option>
				</template>
			</select>
			<input type="text" value="{{filter.value}}" on-change="{{refresh}}">
			<button on-click="{{removeFilter}}">X</button><br>
		</template>
	</template>
	<script>
	Polymer({
		filters: [],
		columns: [],
		newFilter: function(){
			this.filters.push({ column: '', op: this.filterOps[0], value: '' });
		},
		removeFilter: function(e,i,o){
			var index = this.filters.indexOf(o.templateInstance.model.filter);
			this.filters.splice(index, 1);
		},
		refresh: function(){
			this.filters = this.filters.slice();
		},
		getFilterOps: function(){
			return this.filterOps.map(function(element){
				if(typeof element === 'object') return {title:element.title||element.op,op:element.op,html:element.html||element.op};
				else return {title:element,op:element,html:element};
			});
		},
		ready: function(){
			if(this.filterOps === null) filterOps = ["=","≥",">","≤","<"];
		}
	});
	</script>
</polymer-element>  
