{% load i18n %}
<li class="js-map-hover" id="area/{{ area.id }}">
    <h3><a href="{% url "mapit_index" %}area/{{ area.id }}.html">{{ area.name }}</a></h3>
    <p>ID {{ area.id }}, {{ area.type.description }}
        <small>({{ area.type.code }})</small>, {{ area.list_countries|join:", "|default:"-" }}</p>
    {% if area.parent_area %}
    {% url "mapit_index" as index_url %}
    {% with area.parent_area.id|slugify as area_id %}
    <p>{% blocktrans with name=area.parent_area.name url=index_url|add:"area/"|add:area_id|add:".html" %}A child of <a href="{{ url }}">{{ name }}</a>.{% endblocktrans %}</p>
    {% endwith %}
    {% endif %}
</li>
{% if show_map %}
    {% with area.id|slugify as area_id and area.name as area_name %}
    {% include "mapit/map/json.html" with geojson_url="area/"|add:area_id geojson_text=area_name|add:" ("|add:area_id|add:")" %}
    {% endwith %}
{% endif %}
