{% if pagination and pagination.total > 1 %}
<div class="navigation" id="comments_pagination">
	<ul style="list-style: none; padding: 0; margin: 10px 0;">
		{# Ссылка «предыдущая» #}
		{% if pagination.prev.exists %}
			<li style="display: inline-block; margin: 0 5px;">
				<a href="{{ pagination.prev.url }}" rel="prev" aria-label="Previous" data-page="{{ pagination.prev.num }}" style="padding: 5px 10px; background: #f0f0f0; text-decoration: none; border-radius: 3px;">‹ Назад</a>
			</li>
		{% endif %}

		{# Основные элементы #}
		{% for p in pagination.pages %}
			{% if p.type == 'dots' %}
				<li style="display: inline-block; margin: 0 5px;">
					<span style="padding: 5px;">...</span>
				</li>
			{% elseif p.type == 'current' %}
				<li class="active" style="display: inline-block; margin: 0 5px;">
					<span data-page="{{ p.num }}" style="padding: 5px 10px; background: #333; color: #fff; border-radius: 3px; font-weight: bold;">{{ p.num }}</span>
				</li>
			{% elseif p.type == 'link' %}
				<li style="display: inline-block; margin: 0 5px;">
					<a href="{{ p.url }}" data-page="{{ p.num }}" style="padding: 5px 10px; background: #f0f0f0; text-decoration: none; border-radius: 3px;">{{ p.num }}</a>
				</li>
			{% endif %}
		{% endfor %}

		{# Ссылка «следующая» #}
		{% if pagination.next.exists %}
			<li style="display: inline-block; margin: 0 5px;">
				<a href="{{ pagination.next.url }}" rel="next" aria-label="Next" data-page="{{ pagination.next.num }}" style="padding: 5px 10px; background: #f0f0f0; text-decoration: none; border-radius: 3px;">Вперед ›</a>
			</li>
		{% endif %}
	</ul>
	<div style="clear: both;"></div>
</div>
{% endif %}
