{% from "lib/section.html" import section %}

{% call section(gettext("Games"),
  "games",
  "/img/section-games.png",
  title_picture_offset = "0px",
  title_color = "var(--color-primary)"
) %}
  {% for game in glob("games/*.md") | map('markdown') %}
    <div class="game">
      <div class="game--picture-wrapper">
        <img
            class="game--picture"
            src="{{ game.meta.picture | load | write }}"
            alt="{{ game.meta.picture_alt }}"
        >
        </img>
      </div>
      <div class="game--title">
        {{ game.meta.title }}
      </div>
      <div class="game--description">
        {{ game }}

        {% if game.meta.steam_widget_url %}
        <div class="game--widget">
          <iframe src="{{ game.meta.steam_widget_url }}" frameborder="0" width="646" height="190"></iframe>
        </div>
        {% endif %}

        {% if game.meta.itch_io_widget_url %}
        <div class="game--widget">
          <iframe frameborder="0" src="{{ game.meta.itch_io_widget_url }}" width="646" height="175"><a href="{{ game.meta.itch_io_url }}">{{ game.meta.title }} by Frog Collective</a></iframe>
        </div>
        {% endif %}

        <div class="game--buttons">
            <a class="game--steam-button" href="{{ game.meta.website }}" target="_blank">
              <img class="game--link-icon" src="/img/steam-fill.svg" alt-text="{{name}}"></img>
              Learn More
            </a>

            <a class="game--button" href="{{ game.meta.discord_url }}" target="_blank">
              <img class="contact--button-icon" src="/img/discord-fill.svg"></img>
              {% trans %}
              Discord
              {% endtrans %}
            </a>

            <a class="game--button" href="{{ game.meta.presskit_url }}">
              <img class="contact--button-icon" src="/img/information-fill.svg"></img>
              {% trans %}
              Press Kit
              {% endtrans %}
            </a>
        </div>
      </div>
    </div>
  {% endfor %}
{% endcall %}