{{ define "main" }}
  {{ partial "scrolling-image-header" . }}


  <section class="container-fluid list-main">
    <div class="container px-5">
      {{ range .Pages }}
        <section class="card mb-3">
          <div class="card-body d-flex align-items-center">
            {{ $thumbnail := .Resources.GetMatch "thumbnail.png" }}
            {{ $thumbimg := $thumbnail.Resize "250x" }}
            <div class="flex-shrink-0">
              {{ $image := . }}
              <img
                class="img-thumbnail rounded"
                src="{{ $thumbimg.RelPermalink }}"
                alt="Thumbnail of {{ .Title }}"
              />
            </div>
            <div class="flex-grow-1 ms-3 py-1">
              <h3 class="card-title">{{ .Title }}</h3>
              <h4 class="card-subtitle">
                <a href="{{ .Params.deployURL }}">{{ .Params.deployURL }}</a>
              </h4>
              {{ .Content }}
            </div>
            <div class="flex-shrink-0">
              <div class="btn-group-vertical">
                <a
                  class="btn btn-secondary"
                  data-bs-toggle="tooltip"
                  title="{{ .Params.platform }}"
                  href="{{ .Params.platformURL }}"
                >
                  <i class="{{ .Params.platformIcon }}"></i>
                </a>
                <a
                  class="btn btn-secondary"
                  data-bs-toggle="tooltip"
                  title="Source code"
                  href="{{ .Params.sourceURL }}"
                >
                  <i class="fab fa-github"></i>
                </a>
              </div>
            </div>
          </div>
        </section>
      {{ end }}

    </div>
  </section>
{{ end }}