{% assign maxArticles = 10 %}

{% if currentProductTree.renderedShortTitle %}{% assign productTitle = currentProductTree.renderedShortTitle %}{% else %}{% assign productTitle = currentProductTree.renderedFullTitle %}{% endif %}

<div class="py-6 all-articles-list">
  <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">All {{ productTitle }} docs</a></h2>

  <div class="d-flex gutter flex-wrap">
    {% for childPage in currentProductTree.childPages %}
    {% if childPage.page.documentType == "article" %}{% assign standaloneCategory = true %}{% else %}{% assign standaloneCategory = false %}{% endif %}
      {% unless standaloneCategory %}
        <div class="col-12 col-lg-4 mb-6 height-full">
          <h4 class="mb-3"><a href="{{ childPage.href }}">{{ childPage.renderedFullTitle }}</a></h4>

          {% if childPage.childPages and childPage.childPages[0].page.documentType == "mapTopic" %}
            <ul class="list-style-none">
              {% for grandchildPage in childPage.childPages %}
                {% unless grandchildPage.page.hidden %}
                  {% assign numArticles = childPage.childPages | obj_size %}
                  <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}">
                    <a href="{{ grandchildPage.href }}">
                      {{ grandchildPage.renderedFullTitle }}
                    </a>
                  </li>
                  {% if numArticles > maxArticles %}
                    <button class="js-all-articles-show-more btn-link Link--secondary">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
                  {% endif %}
                {% endunless %}
              {% endfor %}
            </ul>
          {% else %}
            <ul class="list-style-none">
              {% assign numArticles = childPage.childPages | obj_size %}
              {% for grandchildPage in childPage.childPages %}
                <li class="mb-3 {% if forloop.index > maxArticles %}d-none{% endif %}"><a href="{{ grandchildPage.href }}">{{ grandchildPage.renderedFullTitle }}</a></li>
              {% endfor %}
            </ul>
            {% if numArticles > maxArticles %}
              <button class="js-all-articles-show-more btn-link Link--secondary">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
            {% endif %}
          {% endif %}
        </div>
      {% endunless %}
    {% endfor %}
  </div>
</div>

{% comment %}
  <small class="color-text-secondary d-inline-block">
    &bull; {{ article.childArticles | obj_size }} articles
  </small>
{% endcomment %}