{# Make sure any variables are listed inside the following if statement #}
{% if context %}
  {# {% set vf-show-more = context.vf-show-more %} #}
{% endif %}

<section data-vf-js-show-more data-vf-js-show-more-pager-size="3" class="vf-show-more">
  {% render '@vf-section-header--default', {
    "section_title": "Show more demo"
  } %}

  <div class="vf-grid vf-grid__col-3">
    {% set items = [
      { title: "foo", id: 1 },
      { title: "foo", id: 2 },
      { title: "foo", id: 3 },
      { title: "foo", id: 4 },
      { title: "foo", id: 5 },
      { title: "foo", id: 6 },
      { title: "foo", id: 7 },
      { title: "foo", id: 8 },
      { title: "foo", id: 9 }
      ]
    %}
    {% for item in items %}
      {% render '@vf-box', {
        "box_heading": item.title,
        "box_text": "I'm item number " + item.id,
        "variant": "easy",
        "override_class":  "vf-show-more__item"
      } %}
    {% endfor %}
  </div>

  <button class="vf-button vf-button--primary vf-button--sm | vf-show-more__button" data-vf-js-show-more-button>Show more</button>
  <button class="vf-button vf-button--primary vf-button--sm | vf-show-more__button--less" data-vf-js-show-more-button--less>Show less</button>
</section>


{# A second set to show you can have more than one set on a page #}

<section data-vf-js-show-more data-vf-js-show-more-pager-size="2" class="vf-show-more">
  {% render '@vf-section-header--default', {
    "section_title": "Show more demo part 2"
  } %}

  <ul class="vf-list vf-list--ordered">
    <li class="vf-list__item | vf-show-more__item">a list item</li>
    <li class="vf-list__item | vf-show-more__item">another list item</li>
    <li class="vf-list__item | vf-show-more__item">and another list item</li>
    <li class="vf-list__item | vf-show-more__item">yet another list item</li>
  </ul>

  <button class="vf-button vf-button--primary vf-button--sm | vf-show-more__button" data-vf-js-show-more-button>Show more list items</button>
  <button class="vf-button vf-button--primary vf-button--sm | vf-show-more__button--less" data-vf-js-show-more-button--less>Show less</button>
</section>