this.jetpackModules = this.jetpackModules || {};

window.jetpackModules.views = (function( window, $, _, Backbone, wp ) {
		'use strict';

		var views = {};

		views.List_Table = Backbone.View.extend({

			template : wp.template( 'Jetpack_Modules_List_Table_Template' ),

			/**
			 * If we can, use replaceState to change the URL and indicate the new filtering.
			 * This will be handy with redirecting back to the same state after activating/deactivating.
			 */
			updateUrl : function() {
				if ( ! window.history.replaceState ) {
					return;
				}

				var url      = window.location.href.split('?')[0] + '?page=jetpack_modules',
					m_tag    = $('.subsubsub .current'),
					m_filter = $('.button-group.filter-active .active'),
					m_sort   = $('.button-group.sort .active'),
					m_search = $('#srch-term-search-input').val();

				if ( m_search.length ) {
					url += '&s=' + encodeURIComponent( m_search );
				}

				if ( ! m_tag.hasClass('all') ) {
					url += '&module_tag=' + encodeURIComponent( m_tag.data('title') );
				}

				if ( m_filter.data('filter-by') ) {
					url += '&' + encodeURIComponent( m_filter.data('filter-by') ) + '=' + encodeURIComponent( m_filter.data('filter-value') );
				}

				if ( 'name' !== m_sort.data('sort-by') ) {
					url += '&sort_by=' + encodeURIComponent( m_sort.data('sort-by') );
				}

				window.history.replaceState( {}, '', url );
			},

			render : function() {
				this.model.filter_and_sort();
				this.$el.html( this.template( this.model.attributes ) );
				this.updateUrl();
				return this;
			},

			initialize : function() {
				this.listenTo( this.model, 'change', this.render );
			}

		});

		return views;

})( this, jQuery, _, Backbone, wp );