{% load village_tags %}
<div class="village-tile{% if self.enlarge_link %} village-enlarge-link{% endif %}{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}"
     {% if self.id %}id="{{ self.id }}"{% endif %}>
  <div class="village-tile__body">
    <div class="village-tile__content">
      <{{ self.heading_tag | default:"h3" }} class="village-tile__title">
      <a class="village-tile__link" href="{{ self.url }}">{{ self.title }}</a>
      </{{ self.heading_tag | default:"h3" }}>
      {% if self.description %}
        <p class="village-tile__desc">
          {{ self.description }}
        </p>
      {% endif %}
      {% if self.detail %}
        <p class="village-tile__detail">
          {{ self.detail }}
        </p>
      {% endif %}
      {% if self.top_detail %}
        <div class="village-tile__start">
          {% if self.top_detail.tags %}
            <ul class="village-tags-group">
              {% for tag in self.top_detail.tags %}
                <li>
                  {% village_tag tag %}
                </li>
              {% endfor %}
            </ul>
          {% elif self.top_detail.badges %}
            <ul class="village-badges-group">
              {% for badge in self.top_detail.badges %}
                <li>
                  {% village_badge badge %}
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
  <div class="village-tile__header">
    {% if self.svg_path %}
      <div class="village-tile__pictogram">
        <svg aria-hidden="true"
             class="village-artwork"
             viewBox="0 0 80 80"
             width="80px"
             height="80px">
          <use class="village-artwork-decorative" href="{{ self.svg_path }}#artwork-decorative"></use>
          <use class="village-artwork-minor" href="{{ self.svg_path }}#artwork-minor"></use>
          <use class="village-artwork-major" href="{{ self.svg_path }}#artwork-major"></use>
        </svg>
      </div>
    {% else %}
      <div class="village-tile__img" role="presentation">
        <img src="{{ self.image_path }}" class="village-responsive-img" alt="" />
      </div>
    {% endif %}
  </div>
</div>
