{% extends "base.html" %}
{% load wagtailcore_tags blog_tags static %}

{% block cart_drop %}{% endblock %}

{% block main %}
  <div class="container-sm">
    <div class="sections">
      {% for blog in blogs %}
        <div class="section">
          <h2 class="title-medium">{{ blog.title }}</h2>
          <div class="mg-t-15">
            <p class="text-bold">
              {% categories_list blog %}
              {{ blog.date }}
            </p>
          </div>
          <div class="mg-t-15">
            {{ blog.body|richtext|truncatewords_html:50 }}
          </div>
          <div class="mg-t-15">
            <a href="{% pageurl blog %}" class="btn btn--primary float-right">Läs mer</a>
          </div>
        </div>
      {% endfor %}
      {% if paginator and blogs.has_next %}
        <div class="hidden">
          <a href="{{ request.path }}?page={{ blogs.next_page_number }}" class="next-page"></a>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'js/infinite-scroll.pkgd.min.js' %}"></script>
  <script>
    $(function () {
      $('.sections').infiniteScroll({
        append: '.section',
        path: '.next-page',
        history: false
      });
    });
  </script>
{% endblock %}