{{ define "main" }}
<div class="section-sm bg-gray-lighter">
    <div class="container text-center">
        <h3 class="font-family-playfair">{{ .Site.Title }} blog.</h3>
    </div><!-- end container -->
</div>

<!-- Blog section  -->
<div class="section">
    <div class="container">
        <div class="row g-4">
            <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
                {{ $paginator := .Paginator 10 }}
                {{ range $paginator.Pages }}
                <!-- Blog Post box -->
                <div class="mb-5">
                    <div class="img-link-box">
                        <a href="{{ .Permalink }}">
                            {{ if .Params.image }}
                                <img src="{{ .Params.image }}" alt="{{ .Title }}">
                            {{ else }}
                                <img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
                            {{ end }}
                        </a>
                    </div>
                    <div class="mt-4">
                        <div class="d-flex justify-content-between mb-2">
                            <div class="d-inline-flex">
                                {{ if .Params.categories }}
                                    {{ range $index, $category := .Params.categories }}
                                        {{ if $index }}, {{ end }}
                                        {{ if and (eq (printf "%T" $category) "string") }}
                                            <a class="font-family-poppins font-small fw-medium uppercase" href="/categories/{{ $category | urlize }}">{{ $category }}</a>
                                        {{ else if and (eq (printf "%T" $category) "map") }}
                                            {{ if $category.name }}
                                                <a class="font-family-poppins font-small fw-medium uppercase" href="/categories/{{ $category.name | urlize }}">{{ $category.name }}</a>
                                            {{ else }}
                                                <a class="font-family-poppins font-small fw-medium uppercase" href="#">General</a>
                                            {{ end }}
                                        {{ else }}
                                            <a class="font-family-poppins font-small fw-medium uppercase" href="#">General</a>
                                        {{ end }}
                                    {{ end }}
                                {{ else }}
                                    <a class="font-family-poppins font-small fw-medium uppercase" href="#">General</a>
                                {{ end }}
                            </div>
                            <div class="d-inline-flex">
                                <span class="font-small">{{ .Date.Format "Jan 2, 2006" }}</span>
                            </div>
                        </div>
                        <h4><a class="text-link-1" href="{{ .Permalink }}">{{ .Title }}</a></h4>
                        {{ if .Params.excerpt }}
                            <p>{{ .Params.excerpt }}</p>
                        {{ else if .Summary }}
                            <p>{{ .Summary }}</p>
                        {{ else }}
                            <p>{{ truncate 200 .Content }}</p>
                        {{ end }}
                        <div class="mt-3">
                            <a class="button-text-1" href="{{ .Permalink }}">Read More</a>
                        </div>
                    </div>
                </div>
                <!-- End Blog Post box -->
                {{ end }}

                <!-- Pagination -->
                {{ partial "pagination.html" . }}
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</div>
<!-- end Blog section -->
{{ end }}