Twig for loop break & continue

Hey all,

I'm working on something difficult. I've given a max range of items for a array and want to wrap a div around the result after the max range is passed. So here is my try. In the web i found a plugin where I can add a break into the for loop but GRAV didn't have this plugin.

PS: Maybe someone has a better solution to do THIS.

MD
---md
modal: true # More button appear and the items are limited to 'maxitems'
maxitems: 2 # Default 2
lazyload: false
jobs:

*TWIG*
---twig
{% if not page.header.modal %}
{% for job in page.header.jobs %}
    <li class="jobs-item">
      <p>{{ job.text }}</p>
      <div class="info">
        <icon data-name="{{ job.icon }}"></icon>
        <ul>
          <li>{{ job.title }}</li> 
          <li>{{ job.area }}, {{ loop.index }}</li>
        </ul>
      </div>
    </li>
{% endfor %}
{% else %}

{% set continue = true %}

{% for job in page.header.jobs %}
  {% if loop.index <= page.header.maxitems  %}
    <li class="jobs-item">
      <p>{{ job.text }}</p>
      <div class="info">
        <icon data-name="{{ job.icon }}"></icon>
        <ul>
          <li>{{ job.title }}</li>
          <li>{{ job.area }}, {{ loop.index }}</li>
        </ul>
      </div>
    </li>
  {% else %}
    {% set continue = true %}
  {% endif %}
{% endfor %}

{% if continue %}
  <div class="md-more">
    {% for job in page.header.jobs %}
      {% if loop.index > page.header.maxitems  %}
        <li class="jobs-item">
          <p>{{ job.text }}</p>
          <div class="info">
            <icon data-name="{{ job.icon }}"></icon>
            <ul>
              <li>{{ job.title }}</li>
              <li>{{ job.area }}, {{ loop.index }}</li>
            </ul>
          </div>
        </li>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

{% endif %}
---

You can try

{% set wrapper_added = false %}

{% for job in page.header.jobs %}
  {% if loop.index <= page.header.maxitems  %}
    {{ _self.printJob(job, loop.index) }}
  {% else %}
    {% if not wrapper_added %}
      <div class="md-more">
    {% endif %}

    {{ _self.printJob(job, loop.index) }}
  {% endif %}  
{% endfor %}
{% if wrapper_added %}
  </div>
{% endif %}

to avoid a double loop

@flaviocopes what does _self.printJob does ? Where should I paste this into it ?

@flaviocopes okey I'm sorry its a macro... But there is something else I found, I dont want to wrap the <div class="md-more"> within the loop

Found a solution, thanks to @flavioscopes :)
---twig
{% macro printJob(job, index) %} <!-- MACRO printVideo html -->
<li class="jobs-item">
<p>{{ job.text }}</p>
<div class="info">
<icon data-name="{{ job.icon }}"></icon>
<ul>
<li>{{ job.title }}</li>
<li>{{ job.area }}, {{ job.place }}</li>
</ul>
</div>
</li>
{% endmacro %}
{% if not page.header.modal %} <!-- IF modal is not true -->
{% for job in page.header.jobs %} <!-- FOR through videos -->
{{ _self.printJob(job, loop.index) }} <!-- PRINT video -->
{% endfor %}

{% else %} <!-- IF modal is true -->
{% for job in page.header.jobs %} <!-- FOR through videos until maxitems is reached -->
{% if loop.index <= page.header.maxitems %}
{{ _self.printJob(job, loop.index) }} <!-- PRINT video -->
{% endif %}
{% endfor %}
<div class="md-more"> <!-- ADD div after maxitems are looped -->
{% for job in page.header.jobs %} <!-- FOR through videos after maxitems limit -->
{% if loop.index > page.header.maxitems %}
{{ _self.printJob(job, loop.index) }} <!-- PRINT video -->
{% endif %}
{% endfor %}
</div>
{% endif %}