{% extends "dash/_frame.twig" %}

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

{% block stylesheets %}
	<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=vdthg">
	{% endblock %}

	{% block mainContent %}
		<section role="book-index-header">
			<div role="book-index-header-left">
				{{ filter }}
				Pages
			</div>
			<div role="book-index-header-right">
				<a href="/dashboard/pages/all" title="view all pages">
					<button>
						<i class="ti ti-clipboard-list"></i>
						{{ stats['all'] }}
					</button>
				</a>
				<a href="/dashboard/pages/published" title="view publised pages">
					<button>
						<i class="ti ti-clipboard-check"></i>
						{{ stats['published'] }}
					</button>
				</a>
				<a href="/dashboard/pages/deleted" title="view deleted pages">
					<button>
						<i class="ti ti-clipboard-off"></i>
						{{ stats['deleted'] }}
					</button>
				</a>
			</section>
			<section role="book-index-pages">
				{% for page in pages %}
					{% if page.media[0].type == 'mp4' %}
						<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="page-link">
							<div class="page-video">
								<video class="post-video" loop muted autoplay>
									<source src="{{ page.media[0].file }}" type="video/mp4">

										Sorry, your browser doesn't support embedded videos.
									</video>
									<div id="meta">
										{{ include("dash/partials/recent-meta.twig") }}
									</div>
								</div>
							</a>
						{% else %}
							<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
								<div class="page-bg" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
									<div id="meta">
										{{ include("dash/partials/recent-meta.twig") }}
									</div>
								</div>
							</a>
						{% endif %}

					{% endfor %}
					{% if numOfPages > 1 %}
						<div role="paginate">
							<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['prevPage'] }}">
								<i class="ti ti-square-arrow-left"></i>
							</a>
							<span class="count">
								{{ currentPage }}
								of
								{{ numOfPages }}
							</span>
							<a class="page-btns" href="/dashboard/pages/{{ paginate['sort'] }}/{{ paginate['nextPage'] }}">
								<i class="ti ti-square-arrow-right"></i>
							</a>
						</div>
					{% endif %}

				</section>
			{% endblock %}