{% extends 'base.twig' %}

{% block main %}
<div class="map">
  <div class="map__up">
    <a href="/map/{{ x }}/{{ y - 1 }}">Up</a>
  </div>
  <div>
    <div class="map__left">
      <a href="/map/{{ x - 1 }}/{{ y }}">Left</a>
    </div>
    <div class="map__villages" style="grid-template-columns: repeat({{ range*2+1 }}, 1fr); grid-template-rows: repeat({{ range*2+1 }}, 1fr);">
      {% for row in range(-range, range) %}
        {% for column in range(-range, range) %}
          {% set village = map[x + column][y + row] %}
          <div class="map__village">
            <a href="/village/{{ village.x }}/{{ village.y }}">
              {{ map[x + column][y + row].name }}
            </a>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
    <div class="map__right">
      <a href="/map/{{ x + 1 }}/{{ y }}">Right</a>
    </div>
  </div>
  <div class="map__down">
    <a href="/map/{{ x }}/{{ y + 1 }}">Down</a>
  </div>
</div>
{% endblock %}