{{ define "main" }}
	<main class="container">
		<h1 class="page-title">{{ .Title }}</h1>
		{{ with .Content }}
            <div>{{ . }}</div>
        {{ end }}
		
        <div class="items">
            {{ range .Paginator.Pages }}
            <div class="card mb-3" style="max-width: 1000px;">
              <div class="row g-0">
                <a href="{{ .RelPermalink }}" class="col-md-5">
                    {{ $featuredImage := (resources.Get (printf "%s" ("images/cycle_path_sun.jpg" | safeURL))) }}
                    {{ if .Params.featured_image }}
                        {{ $featuredImage = .Resources.GetMatch (.Params.featured_image.src | safeURL)  }}
                    {{ end }}
                    {{ $featuredImage := $featuredImage.Process "fill 500x350" }}
                    <img class="img-fluid rounded-start" alt="{{ .Params.featured_image.alt }}" src="{{ $featuredImage.RelPermalink }}" />
                </a>
                <div class="col-md-7">
                  <div class="card-body px-4">
                    <h5 class="card-title mb-3">
                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                    </h5>
                    <p class="card-text">
                    {{ .Summary }}
                    </p>
                    <p class="card-text">
                        <small class="text-body-secondary">
                        {{ $date := .Date.Format "2006-01-02"  }}
                        <time datetime="{{ $date }}">
                            {{ time.Format "2 January 2006" $date }}
                        </time>
                        </small>
                    </p>
                    <p class="card-text text-end">
                        <a href="{{ .RelPermalink }}"><small class="mr-4 text-body-secondary">Lire plus</small></a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            {{ end }}
		</div>
		{{ partial "pagination.html" . }}
	</main>
{{ end }}