{{ define "main" }}
	<article class="mx-auto mt-4 max-w-screen-lg">
		<h1 class="mb-2 font-title text-4xl font-bold">Blog</h1>
		<p class="mb-10 text-gray-600">All the latest Vikunja news and updates.</p>

		{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}{{ range
			$paginator.Pages
		}}
			<section class="mb-8">
				<a class="font-title text-2xl font-bold" href="{{ .Permalink }}">{{ .Title }}</a>
				<p class="text-gray-400">{{ .Date.Format "2006-01-02" }}</p>
				<p class="pt-4 text-gray-600">{{ .Summary }}</p>
				<a
					href="{{ .Permalink }}"
					class="mt-4 inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
				>
					<span class="mr-1"> Read more </span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			</section>
		{{ end }}


		<nav
			class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
			aria-label="Pagination"
		>
			{{ if .Paginator.HasPrev }}
				<a
					href="{{ .Paginator.Prev.URL }}"
					class="{{ if .Paginator.HasNext }}
						rounded-l-md
					{{ else }}
						rounded-md
					{{ end }} relative inline-flex items-center border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
				>
					Previous
					<svg
						class="h-5 w-5"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						aria-hidden="true"
					>
						<path
							fill-rule="evenodd"
							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			{{ end }}
			{{ if .Paginator.HasNext }}
				<a
					href="{{ .Paginator.Next.URL }}"
					class="{{ if .Paginator.HasPrev }}
						rounded-r-md
					{{ else }}
						rounded-md
					{{ end }} relative inline-flex items-center border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
				>
					Next
					<svg
						class="h-5 w-5"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						aria-hidden="true"
					>
						<path
							fill-rule="evenodd"
							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			{{ end }}
		</nav>
	</article>
{{ end }}