{{ define "main" }}

<!-- layouts/index.html -->
<div class="section-sm bg-gray-lighter">
  <div class="container text-center">
    <h1 class="font-family-playfair">{{ .Site.Title }}</h1>
    <p class="mt-3">{{ .Site.Params.seo.description }}</p>
  </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.featured_image }}
                                <img src="{{ .Params.featured_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">
                            <!-- Display  category -->
                            {{ partial "categories-first.html" . }}

                            <div class="d-inline-flex">
                                <span class="font-small">{{ .Date.Format "02/07/2006" }}</span>
                            </div>
                        </div>
                        <h2><a class="text-link-1" href="{{ .Permalink }}">{{ .Title }}</a></h2>
                        {{ 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 }}">Lire la suite</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 }}