{% extends 'base.twig' %}

{% block main %}
<div class="map">
  <div class="map__up">
    <a href="/map/{{ x }}/{{ y - 1 }}">
      <i class="icon icon-arrow-up"></i>
    </a>
  </div>
  <div>
    <div class="map__left">
      <a href="/map/{{ x - 1 }}/{{ y }}">
        <i class="icon icon-arrow-left"></i>
      </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">
            {% if village %}
              <a href="/village/{{ village.x }}/{{ village.y }}">
                {{ map[x + column][y + row].name }}
              </a>
            {% endif %}
            </div>
        {% endfor %}
      {% endfor %}
    </div>
    <div class="map__right">
      <a href="/map/{{ x + 1 }}/{{ y }}">
        <i class="icon icon-arrow-right"></i>
      </a>
    </div>
  </div>
  <div class="map__down">
    <a href="/map/{{ x }}/{{ y + 1 }}">
      <i class="icon icon-arrow-down"></i>
    </a>
  </div>
</div>
{% endblock %}