{{ define "main" }}
{{ $authors := site.Data.wordpress.authors }}

<div class="section-sm bg-gray-lighter">
  <div class="container text-center">
    <h3 class="font-family-playfair">{{ .Title }}</h3>
    <p class="mt-2">Liste de tous les auteurs</p>
  </div><!-- end container -->
</div>

<div class="section">
  <div class="container">
    <div class="author-list">
      <div class="row">
        {{ range $author := $authors }}
        <div class="col-md-6 mb-4">
          <article class="author-card-item h-100 card" data-author-name="{{ $author.name }}">
            <div class="row g-0 align-items-center">
              <div class="author-card-image col-md-4 p-2">
                {{ with index $author.avatar_urls "96" }}
                <img decoding="async" src="{{ . }}" alt="{{ $author.name }}" class="author-image img-fluid" loading="lazy">
                {{ else }}
                <img decoding="async" src="/assets/images/img-avatar-md@2x.jpg" alt="{{ $author.name }}" class="author-image img-fluid" loading="lazy">
                {{ end }}
              </div>
              <div class="author-card-info col-md-8">
                <div class="card-body">
                  <h5 class="card-title author-card-name">{{ $author.name }}</h5>
                  {{ with $author.description }}
                  <p class="card-text author-card-title">
                    <small class="text-muted author-card-title-text">{{ . }}</small>
                  </p>
                  {{ end }}
                  <div class="author-card-buttons mt-3">
                    <div class="author-card-button">
                      <a href="/author/{{ $author.slug | anchorize }}" class="author-button-link" aria-label="Voir les articles de {{ $author.name }}">Voir les articles<svg class="uikit-icon" style="width: 1em;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="var(--c-svg, currentColor)" d="M7.5 4.5V6h9.442L4.5 18.442 5.558 19.5 18 7.058V16.5h1.5v-12z"></path></svg></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
        {{ end }}
      </div>
    </div>
  </div><!-- end container -->
</div>
{{ end }}