{{ define "main" }}
<div class="blogs-page">
	<div class="blogs-container">
		<div class="blogs-screen">
			<div class="blogs-content">
				<nav class="blog-navigation">
					<a href="/blogs/" class="nav-link back-link">← All Blogs</a>
				</nav>

				<article class="blog-post-card">
					<h1 class="blog-title">
						{{ .Title }}
						{{ if .Date }}
						<span class="blog-date">{{ .Date.Format "02/01/2006" }}</span>
						{{ end }}
					</h1>
					{{ if .Params.tags }}
					<div class="blog-tags">
						{{ range .Params.tags }}
						<span class="tag">{{ . }}</span>
						{{ end }}
					</div>
					{{ end }}
					<div class="blog-summary">
						{{ .Content }}
					</div>
				</article>

				<nav class="blog-post-navigation">
					<div class="post-nav-links">
						{{ with .PrevInSection }}
						<a href="{{ .Permalink }}" class="nav-link prev-post">← {{ .Title }}</a>
						{{ else }}
						<span class="nav-link disabled">← Previous</span>
						{{ end }}

						{{ with .NextInSection }}
						<a href="{{ .Permalink }}" class="nav-link next-post">{{ .Title }} →</a>
						{{ else }}
						<span class="nav-link disabled">Next →</span>
						{{ end }}
					</div>
				</nav>
			</div>
		</div>
	</div>
</div>
{{ end }}