description = "Showcase list item"
==
<a href="/showcase/{{ slug }}">
  {# Add a gradient to ensure the text is readable regardless of the background color. #}
  <article
    class="card showcase-card"
    style="
      background-image:
        linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 0.8)),
        url({{ ('assets/showcase/' ~ (image | trim)) | theme }}),
        {{ placeholder }}
    "
  >
    <div>
      <div class="showcase-card-title">{{ title }}</div>
      <div class="text-center">{{ author }}</div>
      <div class="showcase-card-icons">
        {% for platform in platforms | replace({' ': ''}) | split(',') %}

        {% if platform is same as('windows') %} {% set platformName = 'Windows' %} {% endif %}
        {% if platform is same as('macos') %} {% set platformName = 'macOS' %} {% endif %}
        {% if platform is same as('linux') %} {% set platformName = 'Linux' %} {% endif %}
        {% if platform is same as('android') %} {% set platformName = 'Android' %} {% endif %}
        {% if platform is same as('ios') %}  {% set platformName = 'iOS' %} {% endif %}
        {% if platform is same as('html5') %} {% set platformName = 'HTML5' %} {% endif %}
        {% if platform is same as('switch') %} {% set platformName = 'Nintendo Switch' %} {% endif %}
        {% if platform is same as('playstation') %} {% set platformName = 'PlayStation' %} {% endif %}
        {% if platform is same as('xbox') %} {% set platformName = 'Xbox' %} {% endif %}

        <img
          width="24"
          height="24"
          src="{{ ('assets/icons/' ~ platform ~ '.svg') | theme }}"
          alt="{{ platformName }}"
          title="{{ platformName }}"
          style="margin: 0 0.125rem"
        >
        {% endfor %}
      </div>
    </div>
  </article>
</a>
