{% extends "coderedcms/pages/web_page.html" %}
{% load coderedcms_tags static wagtailcore_tags %}
{% block content_body %}
{{ block.super }}
{% if page.form_live %}
<div class="container">
  {% block progress_bar %}
  {% if steps|length > 1 %}
  <div class="progress" style="height: 40px;">
    {% with last_step=steps|last %}
    {% widthratio step.index|add:"1" last_step.index|add:"1" 100 as width %}
    <div class="progress-bar" role="progressbar" style="width: {{ width }}%;" aria-valuenow="{{ width }}" aria-valuemin="{{ width }}" aria-valuemax="100">
      <span>Step {{step.index|add:"1"}} / {{last_step.index|add:"1"}} ({{ width }}%)</span>
    </div>
    {% endwith %}
  </div>
  <br>
  {% endif %}
  {% endblock %}

  {% block stream_form %}
  <form class="stream-form {{ page.form_css_class }}" id="{{ page.form_id }}" action="{% pageurl self %}" method="POST" enctype="{{ form_enctype }}">
    {% csrf_token %}

    {% block stream_form_fields %}
    {% for item in markups_and_bound_fields %}
    {% if item.type == "markup" %}
    {% include_block item.block %}
    {% elif item.type == "field" %}
    {% include "coderedcms/includes/stream_forms/render_field.html" with block=item.block field=item.field %}
    {% endif %}
    {% endfor %}
    {% endblock %}

    {% block stream_form_actions %}
    <div class="form-group mt-5 row">
      <div class="{{'horizontal_label_class'|bootstrap_settings}}"></div>
      <div class="{{'horizontal_field_class'|bootstrap_settings}}">
        {% if step != steps|first %}
        <a href="{{page.url}}?step={{step.index}}" class="btn {{page.button_size}} {{page.button_style}} {{page.button_css_class}}">
          Previous
        </a>
        {% endif %}
        {% if steps|last == step %}
        {% include "coderedcms/includes/form_button.html" with button_text=page.button_text %}
        {% else %}
        {% include "coderedcms/includes/form_button.html" with button_text="Next" %}
        {% endif %}
      </div>
    </div>
    {% endblock %}
  </form>
  {% endblock %}
</div>
{% endif %}
{% endblock %}
{% block coderedcms_scripts %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="{% static 'coderedcms/js/crx-streamforms.min.js' %}?v={% coderedcms_version %}"></script>
{% endblock %}
