{% assign category_pages = site.pages
  | where: "category", include.page.category
  | where_exp: "page", "page.url != include.page.url"
  | where_exp: "page", "page.deprecated != true"
  | where_exp: "page", "page.redirect_to == null"
  | sort: "weight", "last"
%}
{% assign top_pages = site.pages
  | where_exp: "page", "page.url != include.page.url"
  | where_exp: "page", "page.deprecated != true"
  | sort: "weight", "last"
%}
{% assign size = site.pages | size %}
<footer class='related-posts-area' id='related' data-js-no-preview>
  <div class='container'>
    <div class='related-posts-section'>
      <div class='callout'>
        <a class='related-posts-callout' href='{{ base }}'>
          <div class='text'>
            <i class='icon'></i>

            <span class='description'>
              {{ site.data.content.related_posts_callout.description | replace: "SIZE", size }}
            </span>

            <span class='push-button -dark'>
              {{ site.data.content.related_posts_callout.link }}
            </span>
          </div>
        </a>
      </div>

      <div class='group'>
        <div class='related-posts-group'>
          {% if include.page.category == 'Others' %}
            <h3>{{ site.data.content.related_posts_group.other }}</h3>
          {% else %}
            <h3>{{ site.data.content.related_posts_group.category | replace: "CATEGORY", include.page.category }}</h3>
          {% endif %}

          <ul class='related-post-list'>
            {% for page in category_pages limit: 6 %}
              {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
            {% endfor %}
          </ul>
        </div>
      </div>

      <div class='group'>
        <div class='related-posts-group'>
          <h3>{{ site.data.content.related_posts_group.top }}</h3>

          <ul class='related-post-list'>
            {% for page in top_pages limit: 6 %}
              {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
