---
layout: base.njk
---
<article class="game-detail">

  <header class="game-detail__header">
    {% if game.logo %}
      <img src="{{ game.logo }}" alt="{{ game.name }}" class="game-detail__logo" />
    {% endif %}
    <div class="game-detail__header-info">
      <h1>{{ game.name }}</h1>
      {% if game.tagline %}
        <p class="game-detail__tagline">{{ game.tagline }}</p>
      {% endif %}
      <div class="game-detail__meta">
        <span>v{{ game.version }}</span>
        <span>{{ game.release_date | dateFormat }}</span>
        {% if game.genre %}<span>{{ game.genre }}</span>{% endif %}
        {% if game.players %}<span>{{ game.players }}</span>{% endif %}
        {% if game.engine %}<span>{{ game.engine }}</span>{% endif %}
      </div>
    </div>
  </header>

  {% if game.screenshots and game.screenshots.length %}
  <section class="game-detail__screenshots">
    {% for img in game.screenshots %}
      <img src="{{ img }}" alt="Captura {{ loop.index }} de {{ game.name }}"
           loading="lazy" class="game-detail__screenshot" />
    {% endfor %}
  </section>
  {% endif %}

  <section class="game-detail__description">
    {{ game.description | markdown | safe }}
  </section>

  <section class="game-detail__downloads">
    <h2>Descargar</h2>
    <div class="download-buttons">
      {% for dl in game.downloads %}
        <a href="{{ dl.file }}" class="download-btn" download>
          <span class="download-btn__platform">{{ dl.platform }}</span>
          <span class="download-btn__size">{{ dl.size }}</span>
        </a>
      {% endfor %}
    </div>
  </section>

  {% if game.tags %}
  <section class="game-detail__tags">
    {% for tag in game.tags %}
      <span class="tag">{{ tag }}</span>
    {% endfor %}
  </section>
  {% endif %}

  <a href="/" class="back-link">&#8592; Volver al catálogo</a>

</article>