{% load wagtailcore_tags wagtailimages_tags core_tags i18n el_pagination_tags %}
<ul class="article-teasers-container promoted-article-list promoted-article-list--theme-headings">
  {% paginate 12 articles %}
  {% for article in articles %}
  <li class="promoted-article-list__item promoted-article-list__item--theme-headings promoted-article-list__item--theme-headings{{article.get_parent_section.get_effective_extra_style_hints}}">
    <a href="{% pageurl article %}" class="promoted-article-list__anchor promoted-article-list__anchor--theme-headings">
      <h5 class="heading promoted-article__title--theme-headings">
      {{article.title}}</h5>
    </a>
    {% if settings.core.SiteSettings.enable_tag_navigation %}
    {% load_tags_for_article article as tags %}
    {% if tags %}
    {% for tag in tags %}
      <a href="{% pageurl tag %}" class="nav-list__anchor nav-list__anchor--column">
        {{tag.title}}
      </a>
    {% endfor %}
    {% endif %}
    {% endif %}
  </li>
  {% endfor %}
  {% get_pages %}
  {% if pages.next %}
  <a class="more-link" data-next="{% url 'home_index' %}?page={{pages.next.number}}" href="{% url 'home_more' %}?page={{pages.next.number}}">More...</a>
  {% endif %}
</ul>

{% block js %}
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $('#articles-more, .article-teasers-container').on('click', '.more-link:visible', function(event){
      event.preventDefault();
      var more_url = $(this).attr('data-next');
      $("#articles-more").append($('<span/>').load(more_url));
      $(this).hide();
    });
    </script>
{% endblock %}
