{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}

{% block title %}Articles{% endblock %}

{% block pageContent %}
	<style>
		@media only screen and (max-width: 900px) {
			.uv-table.uv-list-view table tbody td.uv-last-170{
				width: 100%;
			}
		}
	</style>
	<div class="uv-inner-section">
        <div class="uv-aside uv-category">
		    <div class="uv-main-info-block">
				<div class="uv-aside-head">
					<div class="uv-aside-title">
						<h6>{{ 'FOLDER'|trans }}</h6>
					</div>
					<div class="uv-aside-back">
						<span onclick="window.location = '{{path('helpdesk_member_knowledgebase_folders_collection')}}'"> {{ 'Back'|trans }}</span>
					</div>
				</div>
				{% set defaultImage = asset('bundles/uvdesksupportcenter/images/splash/knowledgebase-splash.png') %}
				<div class="uv-aside-brick">
					<div class="uv-aside-customer-block">
						<div class="uv-aside-avatar">
							<img src="{{solution.solutionImage ? app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') ~ (solution.solutionImage) : defaultImage}}">
						</div>
						<div class="uv-aside-customer-info">
							<span class="uv-customize"></span>
							<span class="uv-bold">{{solution.name}}</span>
							<span>{{solutionCategoryCount}} {{'Categories'|trans }}</span>
							<span>{{solutionArticleCount}} {{'Articles'|trans }}</span>
						</div>
					</div>
					<div class="uv-aside-ticket-block">
						<div class="uv-aside-ticket-brick">
							<span>{{solution.description}}</span>
						</div>
					</div>
					<!--//Ticket Info-->
				</div>
            </div>

			<!--Aside Customer Info Update Brick-->
			<div class="uv-main-info-update-block" style="display: none">
				<div class="uv-aside-head">
					<div class="uv-aside-title">
						<h6>{{ 'Edit Folder'|trans }}</h6>
					</div>
					<div class="uv-aside-back">
						<span>{{ 'Back'|trans }}</span>
					</div>
				</div>

				<div class="uv-aside-brick">
					<form method="post">
						<input class="uv-field" name="id" type="hidden" value="{{ solution.id }}">
						<!-- Field -->
						<div class="uv-element-block">
							<label class="uv-field-label">{{ 'Name'|trans }}</label>
							<div class="uv-field-block">
								<input class="uv-field" name="name" type="text" value="{{ solution.name }}">
							</div>
						</div>
						<!-- //Field -->

						<!-- Field -->
						<div class="uv-element-block">
							<label class="uv-field-label">{{ 'Description'|trans }}</label>
							<div class="uv-field-block">
								<textarea class="uv-field" name="description">{{ solution.description }}</textarea>
							</div>
						</div>
						<!-- //Field -->

						<!-- Field -->
						<div class="uv-action-buttons">
							<a class="uv-btn update-btn" href="#">
								{{ 'Update'|trans }}
							</a>
							<a class="uv-btn cancel-btn" href="#">
								{{ 'Cancel'|trans }}
							</a>
						</div>
						<!-- //Field -->

						<!-- CSRF token Field -->
						{# <input type="hidden" name="_token" value="{{ default_service.generateCsrfToken('') }}"/> #}
						<!-- //CSRF token Field -->
					</form>
				</div>
			</div>


			<!--Aside Brick-->
			<div class="uv-aside-brick">
				<!--Ticket Actions-->
				<div class="uv-aside-ticket-actions">

					<div class="uv-aside-select">
						<label class="uv-aside-select-label">{{ 'Status'|trans }}</label>
						<div>
							<span class="uv-aside-select-value uv-dropdown-other uv-aside-drop-icon" data-id="{{ solution.visibility }}">
								{{ solution.visibility == 'public' ? 'Published'|trans : 'Draft'|trans  }}
							</span>
							<div class="uv-dropdown-list uv-bottom-left">
								<div class="uv-dropdown-container">
									<label>{{ 'Status'|trans }}</label>
									<ul class="status" data-action="status">
										<li data-index="public"><a href="#">{{ 'Published'|trans }}</a></li>
										<li data-index="private"><a href="#">{{ 'Draft'|trans }}</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="uv-aside-brick">
				<a href="{{path('helpdesk_knowledgebase_folder', {'solution': solution.id })}}" target="_blank"  type="button" class="uv-btn-action">
					{{'preview'|trans}}
				</a>
			</div>
        </div>

		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>
				{{ 'Articles'|trans }}
			</h1>
			<div class="uv-action-bar">
                <!-- Select all checkbox -->
                <div class="uv-action-select-wrapper">
                    <label class="uv-vertical-align uv-margin-left-27">
                        <div class="uv-checkbox">
                            <input type="checkbox" class="select-all-checkbox">
                            <span class="uv-checkbox-view"></span>
                        </div>
                    </label>
                </div>
                <!-- //Select all checkbox -->

                <div class="uv-action-col-wrapper">
					<div class="uv-action-bar-col-lt">
						<!--Sort by-->
						<div class="uv-dropdown sort">
							<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
								{{ 'Sort By:'|trans }} {{ 'Created At'|trans }}
							</div>
							<div class="uv-dropdown-list uv-bottom-left">
								<div class="uv-dropdown-container">
									<label>{{ 'Sort By'|trans }}</label>
									<ul>
									</ul>
								</div>
							</div>
						</div>
						<!--Sort by-->

						<!--Filter By Status-->
						<div class="uv-dropdown filter-by-status">
							<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
								{{ 'Status:'|trans }} {{ 'All'|trans }}
							</div>
							<div class="uv-dropdown-list uv-bottom-left">
								<div class="uv-dropdown-container">
									<label>{{ 'Status'|trans }}</label>
									<ul>
										<li class="uv-drop-list-active"><a href="#">{{ 'All'|trans }}</a></li>
										<li><a href="#" data-id="1">{{ 'Active'|trans }}</a></li>
										<li><a href="#" data-id="0">{{ 'Disabled'|trans }}</a></li>
									</ul>
								</div>
							</div>
						</div>
						<!--//Filter By Status-->
					</div>

					<div class="uv-action-bar-col-lt" style="display: none">
						<!-- Mass action -->
						<div class="mass-action">
							<div class="property-block">
								<!-- //Mass status update -->
								<div class="uv-dropdown">
									<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Status'|trans }}</div>
									<div class="uv-dropdown-list uv-bottom-left">
										<div class="uv-dropdown-container">
											<label>{{ 'Status'|trans }}</label>
											<ul class="status" data-action="status">
												<li data-index="1"><a href="#">{{ 'Published'|trans }}</a></li>
												<li data-index="0"><a href="#">{{ 'Draft'|trans }}</a></li>
											</ul>
										</div>
									</div>
								</div>
								<!-- //Mass status update -->

								<!-- Mass trashed -->
								<a class="uv-btn-stroke uv-margin-right-5" id="mass-delete" data-action="delete" style="margin-left: 5px;">
									{{ 'Delete'|trans }}
								</a>
								<!-- //Mass trashed -->
							</div>

						</div>
						<!-- //Mass action -->
					</div>

					<div class="uv-action-bar-col-rt">
						<input type="text" class="uv-search-inline uv-vertical-align uv-margin-right-15" placeholder="{{ 'Search'|trans }}">
						<!-- Add Button -->
						<a href="{{ path('helpdesk_member_knowledgebase_create_article') }}" type="button" class="uv-btn-action">
							<span class="uv-icon-add"></span>
							{{ "New Article"|trans }}
						</a>
						<!--// Add Button -->
					</div>
				</div>
            </div>
            <!--//Action Bar-->

            <div class="uv-table uv-list-view">
                <table>
                    <thead>
                        <tr>
							<th style="width: 1px;"></th>
                            <th></th>
                            <th>{{ "Id"|trans }}</th>
                            <th>{{ "Article"|trans }}</th>
	                        <th>{{ "Viewed"|trans }}</th>
                            <th>{{ "Created"|trans }}</th>
                            <th>{{ "Status"|trans }}</th>
                            <th class="uv-last">{{ "Action"|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
				<div class="navigation"></div>
            </div>
		</div>
	</div>
{% endblock %}

{% block footer %}
	{{ parent() }}

	<!-- Sorting Template -->
	<script id="article_list_sorting_tmp" type="text/template">
        <li class="<% if(sort == 'a.dateAdded') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/a.dateAdded/<% if(sort == 'a.dateAdded') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.dateAdded">
				{% trans %}Created At{% endtrans %}
				<% if(sort == 'a.dateAdded') { %>
					<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
				<% } %>
			</a>
        </li>

	    <li class="<% if(sort == 'a.name') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/a.name/<% if(sort == 'a.name') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.name">
				{% trans %}Name{% endtrans %}
				<% if(sort == 'a.name') { %>
					<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
				<% } %>
			</a>
        </li>

	    <li class="<% if(sort == 'a.viewed') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/a.viewed/<% if(sort == 'a.viewed') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.viewed">
				{% trans %}Viewed{% endtrans %}
				<% if(sort == 'a.viewed') { %>
					<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
				<% } %>
			</a>
        </li>
	</script>
	<!-- //Sorting Template -->

	<!-- Article list item template -->
	<script id="article_list_item_tmp" type="text/template">
		<td>
            <label class="uv-vertical-align uv-margin-left-17">
                <div class="uv-checkbox">
                    <input type="checkbox" class="mass-action-checkbox" value="<%- id %>"/>
                    <span class="uv-checkbox-view"></span>
                </div>
            </label>
        </td>
		<td data-value="{{ 'popularity'|trans }}" class="uv-text-center">
			<% if(viewed > 100){ %>
				<span class="uv-icon-popular uv-icon-popular-active"></span>
			<% }else{ %>
				<span class="uv-icon-popular"></span>
			<% } %>
		</td>
		<td data-value="{{ 'Id'|trans }}">
			<%- id %>
		</td>
		<td data-value="{{ 'Article'|trans }}"><%- name %></td>
		<td data-value="{{ 'Viewed'|trans }}"><%- viewed ? viewed : 0 %></td>
		<td data-value="{{ 'Created'|trans }}"><%- dateAdded %></td>
		<td data-value="{{ 'Status'|trans }}">
			<% if(status) { %>
            	<span class="uv-text-success">{{ 'Published'|trans }}</span>
            <% } else { %>
            	<span class="uv-text-danger">{{ 'Draft'|trans }}</span>
        	<% } %>
		</td>
		<td data-value="{{ 'Action'|trans }}" class="uv-last-170">
			<a href="<%- path.replace('replaceId', id) %>" class="uv-btn-stroke edit-article">
				{{ "Edit"|trans }}
			</a>
			<a class="uv-btn-stroke preview-article" href="<%- pathPreview.replace('replaceId', slug) %>" target="_blank" <%- status ? '' : 'disabled="disabled"' %>>
				{{ "Preview"|trans }}
			</a>
		</td>
    </script>
	<!-- //Article list item template -->

	<script type="text/javascript">
		var path = "{{ path('helpdesk_member_knowledgebase_update_article', {'id': 'replaceId' }) }}";
		var pathPreview = "{{ path('helpdesk_knowledgebase_read_slug_article', {'slug': 'replaceId' }) }}";

		$(function () {
			var globalMessageResponse = "";

			var ArticleModel = Backbone.Model.extend({
				idAttribute : "id"
			});

			var ArticleCollection = AppCollection.extend({
				model : ArticleModel,
				url : "{{ path('helpdesk_member_knowledgebase_folder_articles_collection_xhr', {solution: solution.id}) }}",
				filterParameters : {
					"isActive" : "",
					"search" : ""
				},
				parseRecords: function (resp, options) {
					return resp.results;
				},
				syncData : function() {
					app.appView.showLoader();
					this.fetch({
						data : this.getValidParameters(),
						reset: true,
						success: function(model, response) {
							app.appView.hideLoader();
							var articleListView = new ArticleList();
							app.pager.paginationData = response.pagination_data;

							var url = app.pager.paginationData.url;
							if(articleCollection.length == 0 && app.pager.paginationData.current != "0")
								router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
							else {
								app.pager.render();
							}
							if(globalMessageResponse)
								app.appView.renderResponseAlert(globalMessageResponse);
							globalMessageResponse = null;
						},
						error: function (model, xhr, options) {
							if(url = xhr.getResponseHeader('Location'))
								window.location = url;
						}
					});
				},
                batchOperation : function(data) {
					if(!data.ids.length) return;
                    var self = this;
                    app.appView.showLoader();
                    $.ajax({
                        url : "{{ path('helpdesk_member_knowledgebase_update_article_xhr') }}",
                        type : 'POST',
                        data : {data : data},
                        dataType : 'json',
                        success : function(response) {
                            app.appView.hideLoader();
                            globalMessageResponse = response;
                            self.syncData();
                        },
                        error: function (xhr) {
                            if(url = xhr.getResponseHeader('Location'))
                                window.location = url;
                            var response = warningResponse;
                            if(xhr.responseJSON)
                                response = xhr.responseJSON;

                            app.appView.hideLoader();
                            app.appView.renderResponseAlert(response);
                            $('.mass-action-checkbox').prop('checked', false);
                        }
                    });
                }
			});

			var ArticleItem = Backbone.View.extend({
				tagName : "tr",
				template : _.template($("#article_list_item_tmp").html()),
				render : function() {
					this.$el.html(this.template(this.model.toJSON()));
					return this;
				},
				unrender : function(response) {
					if(response.alertMessage != undefined) {
						articleCollection.syncData();
						app.appView.renderResponseAlert(response)
					}
				},
			});

			var ArticleList = Backbone.View.extend({
				el : $(".uv-list-view table tbody"),
				events: {
                    'change .mass-action-checkbox' : 'showBulkOptions'
				},
				initialize : function() {
					this.render();
				},
                showBulkOptions : function() {
                    var count = 0;
                    this.$el.find('.mass-action-checkbox').each(function() {
                        if($(this).is(':checked'))
                            count++;
                    });

                    if(count == $('.mass-action-checkbox').length)
                        $('.select-all-checkbox').prop('checked', true);
                    else
                        $('.select-all-checkbox').prop('checked', false);

                    if(count) {
                        $('.uv-action-bar-col-lt').eq(0).hide();
                        $('.uv-action-bar-col-lt').eq(1).show();
                        $('.uv-action-bar-col-rt').hide()
                    } else {
                        $('.uv-action-bar-col-lt').eq(1).hide();
                        $('.uv-action-bar-col-lt').eq(0).show();
                        $('.uv-action-bar-col-rt').show()
                    }
                },
				render : function () {
					this.$el.find("tr").remove();
					if(articleCollection.length) {
						_.each(articleCollection.models, function (item) {
							this.renderArticle(item);
						}, this);
					} else {
						this.$el.append("<tr style='text-align: center;'><td colspan='8'>{% trans %}No Record Found{% endtrans %}</td></tr>")
					}
				},
				renderArticle : function (item) {
					var articleItem = new ArticleItem({
						model: item
					});
					this.$el.append(articleItem.render().el);
				}
			});

            var BulkActionView = Backbone.View.extend({
                el : $(".mass-action"),
                currentEvent : null,
                events : {
                    'click ul li' : 'massAction',
                    'click #mass-delete' : 'confirmRemove'
                },
                massAction: function(e) {
                    e.preventDefault();
                    //if(!parseInt(Backbone.$(e.currentTarget).attr('data-index'))) return;
                    var data = {};
                    data['actionType'] = Backbone.$(e.currentTarget).parents('ul').attr('data-action') ? Backbone.$(e.currentTarget).parents('ul').attr('data-action') : Backbone.$(e.currentTarget).attr('data-action');
                    data['targetId'] = Backbone.$(e.currentTarget).attr('data-index');
                    data['ids'] = this.getCheckedIds();
                    articleCollection.batchOperation(data);
                    this.hideBulkOptions();
                },
                removeItem: function(e) {
                    var data = {};

                    if(Backbone.$(this.currentEvent.currentTarget).is("#mass-delete"))
                        data['actionType'] = "delete";

                    data['ids'] = this.getCheckedIds();
                    articleCollection.batchOperation(data);
                    this.hideBulkOptions();
                },
                getCheckedIds() {
                    var ids = new Array();
                    $('.mass-action-checkbox').each(function() {
                        if($(this).is(':checked')) {
                            ids.push($(this).val());
                        }
                    });

                    return ids;
                },
                confirmRemove: function(e) {
                    e.preventDefault();
                    this.currentEvent = e;

                    app.appView.openConfirmModal(this)
                },
                hideBulkOptions : function() {
					$('.uv-action-bar-col-lt').eq(1).hide();
					$('.uv-action-bar-col-lt').eq(0).show();
					$('.uv-action-bar-col-rt').show()

					$('.select-all-checkbox').prop('checked', false)
                }
            });

			var FolderForm = Backbone.View.extend({
				events : {
					'click .uv-btn.update-btn' : "saveFolder",
					'blur input': 'formChanegd',
                    'click .cancel-btn': 'backToInfo',
                    'click .uv-aside-back': 'backToInfo'
				},
				initialize : function() {
					Backbone.Validation.bind(this);
				},
				formChanegd: function(e) {
			    	this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
			    	this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
			    },
				saveFolder: function (e) {
					e.preventDefault();
                    currentElement = Backbone.$(e.currentTarget);
                    this.model.clear();
			        this.model.set(this.$el.find('form').serializeObject());
                    self = this;
			        if(this.model.isValid(true)) {
                        app.appView.showLoader();
						currentElement.attr('disabled', 'disabled');
                        this.model.save({}, {
                            success: function (model, response, options) {
                                app.appView.hideLoader();
                                currentElement.removeAttr("disabled");
                                if(response.alertClass == "success") {
                                    app.appView.renderResponseAlert(response);
                                    $('.uv-aside-customer-info .uv-bold').text(self.model.attributes.name);
                                    $('.uv-aside-ticket-brick span').text(self.model.attributes.description);
                                    self.backToInfo();
                                } else
                                    self.addErrors(JSON.parse(response.errors));
                            },
                            error: function (model, xhr, options) {
                                if(url = xhr.getResponseHeader('Location'))
                                    window.location = url;

                                app.appView.hideLoader();
                                app.appView.renderResponseAlert(warningResponse);
                            }
                        });
			        }
				},
                addErrors: function(jsonContext) {
		    		for (var field in jsonContext) {
		    			Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
					}
                },
                backToInfo: function(e) {
                    if(e) e.preventDefault();

                    $('.uv-main-info-update-block').hide()
                    $('.uv-main-info-block').show()
                },
			});

            var FolderModel = Backbone.Model.extend({
				validation: {
					'name': {
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    }
				},
                urlRoot : "{{ path('helpdesk_member_knowledgebase_update_folder_xhr') }}"
			});

			var foldermodel = new FolderModel({
                id : "{{ solution.id }}",
                name : "{{ solution.name }}",
				visibility: "{{ solution.visibility }}",
				description: "{{ solution.description }}",
			})

			FolderForm = new FolderForm({
				el : $(".uv-main-info-update-block"),
				model : foldermodel
			});

            var PageView = Backbone.View.extend({
                el: '.uv-paper',
                events : {
                    'change .select-all-checkbox' : 'selectAll',
                    'click .uv-aside-customer-info .uv-customize': 'showUpdateBlock',
                    'click .uv-aside-ticket-actions .uv-aside-select .uv-dropdown-list li': 'editSolutionProperty',
                },
                editSolutionProperty: function(e) {
                    var currentElement = Backbone.$(e.currentTarget);
                    var uvSelect = currentElement.parents('.uv-aside-select');
                    var field = currentElement.parent().attr('data-action');
                    var value = currentElement.attr('data-index');
                    if(uvSelect.find('.uv-aside-select-value').attr('data-id') != value) {
                        var name = currentElement.text().trim();
                        app.appView.showLoader();
                        this.model.save({editType: field, value: value, id: this.model.id}, {
                            patch: true,
                            success: function (model, response, options) {
                                uvSelect.find('.uv-aside-select-value').attr('data-id', value).text(name)
                                app.appView.hideLoader();
                                app.appView.renderResponseAlert(response);
                            },
                            error: function (model, xhr, options) {
                                if(url = xhr.getResponseHeader('Location'))
                                    window.location = url;
                                var response = warningResponse;
                                if(xhr.responseJSON)
                                    response = xhr.responseJSON;

                                app.appView.hideLoader();
                                app.appView.renderResponseAlert(response);
                            }
                        });
                    }
                },
                selectAll : function(e) {
                    if(Backbone.$(e.currentTarget).is(':checked')) {
						if($('.mass-action-checkbox').length){
							$('.mass-action-checkbox').prop('checked', true);

							$('.uv-action-bar-col-lt').eq(0).hide();
							$('.uv-action-bar-col-lt').eq(1).show();
							$('.uv-action-bar-col-rt').hide()
						}else
							Backbone.$(e.currentTarget).prop('checked', false)
                    } else {
                        var count = 0;
                        $('.mass-action-checkbox').each(function() {
                            if($(this).is(':checked'))
                                count++;
                        });
                        if(count == $('.mass-action-checkbox').length) {
                            $('.mass-action-checkbox').prop('checked', false);

							$('.uv-action-bar-col-lt').eq(1).hide();
							$('.uv-action-bar-col-lt').eq(0).show();
							$('.uv-action-bar-col-rt').show()
                        }
                    }
                },
                showUpdateBlock: function() {
                    $('.uv-main-info-update-block').show()
                    $('.uv-main-info-block').hide()
                },
            });

			var pageView = new PageView({
				model : foldermodel
			});
            var bulkAction = new BulkActionView();

			var Filter = app.Filter.extend({
				defaultSortIndex: 'a.dateAdded',
				sortText: "{% trans %}Sort By:{% endtrans %} ",
				defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Created At{% endtrans %}",
				template : _.template($("#article_list_sorting_tmp").html())
			})

			var articleCollection = new ArticleCollection();

			var filter = new Filter({
				collection : articleCollection
			});

			Router = Backbone.Router.extend({
				routes: {
					'page/:number(/sort/:sortField)(/direction/:order)' : 'paginate',
					'isActive/:status(/search/:query)(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterArticleByStatus',
					'search/:query(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterByQuery',
					'' : 'initializeList'
				},
				initializeList : function() {
					this.resetParams('', '');
					articleCollection.state.currentPage = null;
					filter.sortCollection();
					articleCollection.syncData();
				},
				paginate : function(number,sortField,order) {
					this.resetParams('', '');
					articleCollection.state.currentPage = number;
					filter.sortCollection(sortField,order);
					articleCollection.syncData();
				},
				filterArticleByStatus: function(status,query,number,sortField,order) {
					this.resetParams(status,query);
					articleCollection.state.currentPage = number;
					filter.sortCollection(sortField,order);
					articleCollection.syncData();
				},
				filterByQuery : function(query,number,sortField,order) {
					this.resetParams('',query);
					articleCollection.state.currentPage = number;
					filter.sortCollection(sortField,order);
					articleCollection.syncData();
				},
				resetParams : function(status, query) {
					if(query != null)
						query = query.replace(/\+/g,' ');
					articleCollection.filterParameters.isActive = status;
					var statusText = status ? $(".filter-by-status a[data-id='" + status + "']").text() : "{% trans %}All{% endtrans %}";
					$(".filter-by-status .uv-dropdown-btn").text("{% trans %}Status:{% endtrans %} " + statusText);
					articleCollection.filterParameters.search = query;
					$(".uv-search-inline").val(query);
				}
			});

			router = new Router();
			Backbone.history.start({push_state:true});
		});
	</script>
{% endblock %}