{% capture currentform %}{{ include.form }}{% endcapture %}

{% for currentpage in site.data %}

{% assign fields = currentpage.fields %}
{% assign label = currentpage.title %}

{% assign length = forloop.length %}

{% assign percentdone = forloop.index | times: '100' | divided_by: forloop.length %}

<div class="form-section"{% if currentpage.group %} data-group="{{ currentpage.group }}"{% endif %}>

  <header class="hero-banner default" id="page-{{ forloop.index }}">
    <div class="form-header-meta">
      {% comment %} Form title {% endcomment %}
      <h2>{{ page.title }}</h2>

      <div class="form-progress">
        {% if length < 6 %}
          <div class="form-progress-bubble">Page {{ forloop.index }} of {{ length }}</div>
        {% else %}
          {% comment %} Progress bar {% endcomment %}
          <div class="form-progress-bar form-progress-bar-{{ percentdone }}">{{ percentdone }}% done</div>
        {% endif %}
      </div>
    </div>
    <h1>
      {{ label | markdownify | remove: '<p>' | remove: '</p>' }}
    </h1>
    {% if currentpage.description %}
      {{ currentpage.description | markdownify | improve }}
    {% endif %}
  </header>

  <div class="form-content">
    <div class="form-content-inner">

      <div class="nav-on-top">
        {% include pagination.html %}
      </div>
      {% comment %} Render fields in the currentpage {% endcomment %}
      {% include render_field.html %}

      {% include pagination.html %}
    </div>
  </div>

</div>

{% endfor %}