{% extends "delivery/base.html" %}
{% block title %}{{ site.title }}{% endblock %}
{% block content %}
<section class="pause-menu" aria-label="Pause menu">
  {# Chevrons echo JRPG menu-selection arrows. ASCII-safe so they stay
     inside Press Start 2P's basic-Latin subset; hyphens read as a dev
     placeholder. #}
  <h1 class="pause-menu__title">&lt;&lt; PAUSE &gt;&gt;</h1>
  <ul class="pause-menu__grid">
    {% for tile in tiles %}
      <li class="pause-menu__tile">
        <a href="{{ tile.url }}">
          <span class="pause-menu__sprite"
                style="background-image: url('/theme/zelda/static/sprites/items/{{ tile.sprite }}.png');"
                aria-hidden="true"></span>
          <span class="pause-menu__label">{{ tile.title }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</section>
{% endblock %}