<f:if condition="{configuration.insertAbove}">
	<f:render section="paginator" arguments="{pagination: pagination, recordsLabel: configuration.recordsLabel}" />
</f:if>

<f:if condition="{configuration.insertAbove} || {configuration.insertBelow}">
	<script type="text/javascript">
		function goToPage(formObject) {
			var formField = formObject.elements['paginator-target-page'];
			var url = formField.dataset.url;
			var numberOfPages = parseInt(formField.dataset.numberOfPages);
			var page = parseInt(formField.value);
			if (page > numberOfPages) {
				page = numberOfPages;
			} else if (page < 1) {
				page = 1;
			}
			url = url.replace('987654321', page);
			self.location.href = url;
			return false;
		}
	</script>
</f:if>

<f:renderChildren arguments="{contentArguments}" />

<f:if condition="{configuration.insertBelow}">
	<f:render section="paginator" arguments="{pagination: pagination, recordsLabel: configuration.recordsLabel}" />
</f:if>

<f:section name="paginator">
	<nav class="pagination-wrap">
		<ul class="pagination pagination-block">
			<f:if condition="{pagination.hasLessPages}">
				<f:then>
					<li>
						<a href="{f:widget.uri(arguments:{currentPage: 1})}" title="{f:translate(key:'widget.pagination.first')}">
							<core:icon identifier="actions-view-paging-first" />
						</a>
					</li>
					<li>
						<a href="{f:widget.uri(arguments:{currentPage: pagination.previousPage})}" title="{f:translate(key:'widget.pagination.previous')}">
							<core:icon identifier="actions-view-paging-previous" />
						</a>
					</li>
				</f:then>
				<f:else>
					<li class="disabled">
						<span>
							<core:icon identifier="actions-view-paging-first" />
						</span>
					</li>
					<li class="disabled">
						<span>
							<core:icon identifier="actions-view-paging-previous" />
						</span>
					</li>
				</f:else>
			</f:if>
			<li>
				<span>
					<f:if condition="{recordsLabel}">
						<f:then>
							{recordsLabel}
						</f:then>
						<f:else>
							<f:translate key="widget.pagination.records" />
						</f:else>
					</f:if>
					{pagination.startRecord} - {pagination.endRecord}
				</span>
			</li>
			<li>
				<span>
					<f:translate key="widget.pagination.page" />

					<form onsubmit="return goToPage(this);" style="display:inline;">
						<f:form.textfield additionalAttributes="{min: '1', data-number-of-pages: '{pagination.numberOfPages}', data-url: '{f:widget.uri(arguments:{currentPage: 987654321})}'}" name="paginator-target-page" class="form-control input-sm paginator-input" size="5" value="{pagination.current}" type="number" />
					</form>

					/ {pagination.numberOfPages}
				</span>
			</li>
			<f:if condition="{pagination.hasMorePages}">
				<f:then>
					<li>
						<a href="{f:widget.uri(arguments:{currentPage: pagination.nextPage})}" title="{f:translate(key:'widget.pagination.next')}">
							<core:icon identifier="actions-view-paging-next" />
						</a>
					</li>
					<li>
						<a href="{f:widget.uri(arguments:{currentPage: pagination.numberOfPages})}" title="{f:translate(key:'widget.pagination.last')}">
							<core:icon identifier="actions-view-paging-last" />
						</a>
					</li>
				</f:then>
				<f:else>
					<li class="disabled">
						<span>
							<core:icon identifier="actions-view-paging-next" />
						</span>
					</li>
					<li class="disabled">
						<span>
							<core:icon identifier="actions-view-paging-last" />
						</span>
					</li>
				</f:else>
			</f:if>
			<li>
				<a href="{f:widget.uri(arguments:{currentPage: pagination.current})}" title="{f:translate(key:'widget.pagination.refresh')}">
					<core:icon identifier="actions-refresh" />
				</a>
			</li>
		</ul>
	</nav>
</f:section>