{% set defaultNames = [
  "Mike Karthauser",
  "Tawny Bartlett",
  "Joe Howell",
  "Jon Hallett",
  "Michael Itkoff",
  "Mick Felton",
  "Duncan Davidson",
  "Adam Cuddihy",
  "Huw Davies",
  "Scott Euser",
  "Brian Hartwell",
  "Alan Hatch",
  "Holly Ross",
  "Josh Mitchell",
  "Brian Healy",
  "Chris Jarvis",
  "Daniel Easterbrook",
  "Anonymous",
] %}

{% set names = names|default(defaultNames) %}

<section>
  <h2 class="text-xl font-bold">{{ title|default('Testimonials') }}</h2>

  <div class="mt-4 space-y-12">
    {% for testimonial in site.testimonials|filter(testimonial => names is null or testimonial.name in names) %}
      <div>
        <div class="italic prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
        <blockquote>
            {{ testimonial.text|markdown }}
          </blockquote>

          <div class="not-prose">
            <footer class="mt-8 flex items-center space-x-4 space-x-reverse">
              <span class="text-base">
                {% if testimonial.url %}
                  <a href="{{ testimonial.url }}">
                    {{ testimonial.name }} - {{ testimonial.title }}
                  </a>
                {% else %}
                  {{ testimonial.name }} - {{ testimonial.title }}
                {% endif %}
              </span>

              {% if testimonial.image %}
                <span class="order-first flex-shrink-0">
                  <img class="size-16 rounded-full ring-2 ring-grey-500 dark:ring-white" alt="Photo of {{ testimonial.name }}" src="{{ testimonial.image.url }}" />
                </span>
              {% endif %}
            </footer>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</section>