{% raw %}
{% load mote_tags i18n %}

{% mask element.json.data.ArticleList as "article" %}
  <h4 class="heading related-articles__up-next">{% trans "Next up in [category]:" %}</h4>
  <div class="related-articles-up-next">
      <a href="#" class="article__anchor">
        <img src="{{article.hero.image.src}}" alt="{{article.hero.image.alt}}" width="320" class="article__image">
      </a>
    <h1 class="heading related-articles-up-next__title">{{article.hero.title}}</h1>
    <p class="related-articles-up-next__desc">{{article.hero.subtitle}}</p>
  </div>

  <h4 class="heading related-articles__recommended">{% trans "Recommended:" %}</h4>
  <div class="related-articles-recommended">
    <ul class="related-articles-recommended-list">
      {% for list in  article.list %}
      <li class="related-articles-recommended-list__item">
        <a href="#" class="promoted-article-list__anchor">
          <img src="{{list.image.src}}" alt="{{list.image.alt}}" width="320" class="article__image">
        </a>
        <h3 class="heading related-articles-recommended__title">{{list.text}}</h3>
        <p class="related-articles-recommended__desc"> {{list.text}}</p>
      </li>
    {% endfor %}
    </ul>
  </div>
{% endraw %}
