{{ define "main" }}

<!-- layouts/categories/list.html -->
<div class="section-sm bg-gray-lighter">
  <div class="container text-center">
    <h1 class="font-family-playfair">{{ .Title }}</h1>
  </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">
                {{ range $.Site.Data.wordpress.categories }}
                <!-- Category box -->
                <div class="mb-5">
                    <div class="mt-4">
                        <div class="d-flex justify-content-between mb-2">
                            <!-- Display category info -->
                            <div class="d-inline-flex">
                                <span class="font-small">Catégorie</span>
                            </div>
                        </div>
                        <h2><a class="text-link-1" href="{{ .link | relURL }}">{{ .name }}</a></h2>
                        {{ if .description }}
                        <p>{{ .description | safeHTML }}</p>
                        {{ else }}
                        <p>Découvrez tous les articles de la catégorie {{ .name }}.</p>
                        {{ end }}
                        <div class="mt-3">
                            <a class="button-text-1" href="{{ .link | relURL }}">Voir la catégorie</a>
                        </div>
                    </div>
                </div>
                <!-- End Category box -->
                {{ if not .IsLast }}<hr class="my-5">{{ end }}
                {{ end }}
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</div>
<!-- end Blog section -->
{{ end }}