{% extends "demo/_layout" %}

{% set pageTitle = "Manual Multi-Page Forms | Extras" %}

{# Replace 'freeformManualMultipage' with your form handle #}
{% set demoFormHandle = "freeformManualMultipage" %}

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

    <div class="freeform-page-heading">
        <h2>Manual Multi-Page Forms</h2>
        <p>This example shows how to manually template multi-page forms.</p>
    </div>

    {% if form %}

        {# Replace "demo/extras/manual-multipage" where to return after the form will be submitted, or remove it to have it respect the value set inside the form builder #}
        {{ form.renderTag({returnUrl: "demo/extras/manual-multipage"}) }}

            {# Display any general errors upon submit #}
            <div class="form-heading-errors">
                {% if form.hasErrors %}
                    <div class="freeform-form-has-errors">
                        {{ "There was an error submitting this form"|t }}

                        {% if form.errors|length %}
                            <ul>
                                {% for error in form.errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                {% endif %}
            </div>

            {# Set up your needed form page fields #}
            {% set firstName = form.get("firstName") %}
            {% set lastName = form.get("lastName") %}
            {% set company = form.get("company") %}
            {% set email = form.get("email") %}
            {% set phone = form.get("phone") %}
            {% set state = form.get("state") %}
            {% set recipients = form.get("recipients") %}

            {# Show page tabs for visual reference only - these cannot be linked #}
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <span class="nav-link{% if form.currentPage.index == 0 %} active fw-bold{% else %} disabled{% endif %}">Page 1</span>
                </li>
                <li class="nav-item">
                    <span class="nav-link{% if form.currentPage.index == 1 %} active fw-bold{% else %} disabled{% endif %}">Page 2</span>
                </li>
            </ul>

            {# Show page 1 contents only #}
            {% if form.currentPage.index == 0 %}

                <div class="form-field">
                    {# Very manual #}
                    <label>{{ firstName.label }}</label>
                    <input name="firstName" value="{{ firstName.value }}" />
                    {{ firstName.renderErrors() }}
                </div>

                <div class="form-field">
                    <label>{{ lastName.label }}</label>
                    <input name="lastName" value="{{ lastName.value }}" />
                    {{ lastName.renderErrors() }}
                </div>

                <div class="form-field">
                    {# Somewhat manual #}
                    {{ company.renderLabel() }}
                    {{ company.renderInput() }}
                    {{ company.renderErrors() }}
                </div>

                <button type="submit">Continue</button>

            {# Show page 2 contents only #}
            {% elseif form.currentPage.index == 1 %}

                <div class="form-field">
                    <label>Email Address</label>
                    <input name="email" value="{{ email.value }}" />
                    {{ form.get("email").renderErrors() }}
                </div>

                <div class="form-field">
                    {# Manual errors #}
                    <label>Phone</label>
                    <input name="phone" />
                    {% if form.get("phone").hasErrors %}
                        This field is required!
                    {% endif %}
                </div>

                <div class="form-field">
                    {# Manual multi-option field #}
                    <label>State</label>
                    <select name="state">
                        {# You may also manually hardcode each option as well, as long as these options exist inside the form builder #}
                        {% for option in state.options %}
                            <option value="{{ option.value }}" {{ option.value in field.value ? "selected" }}>{{ option.label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-field">
                    {# Manual Dynamic Recipients field as Select #}
                    <label>Recipient</label>
                    <select name="recipients">
                        {% for recipient in recipients.options %}
                            {# value is required to be 0, 1, 2, etc instead of actual email value #}
                            <option value="{{ loop.index0 }}">{{ recipient.label }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# To include 'Previous' button, be sure to give it a name of 'form_previous_page_button' #}
                <button type="submit" name="form_previous_page_button">Previous</button>
                <button type="submit" name="form_page_submit">Finish</button>

            {% endif %}

        {{ form.renderClosingTag }}

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or your test form:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
                <li>Have at least 2 pages for your form (name them however you please).</li>
                <li>
                    Make sure Page 1 of your test form includes the following fields at minimum, or adjust the overrides inside this template:
                    <ul>
                        <li>First Name text field with handle of <code>firstName</code>.</li>
                        <li>Last Name text field with handle of <code>lastName</code>.</li>
                        <li>Company text field with handle of <code>company</code>.</li>
                    </ul>
                </li>
                <li>
                    Make sure Page 2 of your test form includes the following fields at minimum, or adjust the overrides inside this template:
                    <ul>
                        <li>Email field (email field type) with handle of <code>email</code>.</li>
                        <li>Phone text field with handle of <code>phone</code>.</li>
                        <li>State select field with handle of <code>state</code>, and some option values set.</li>
                        <li>Dynamic Recipients field type with handle of <code>recipients</code>, and some option values set (e.g. <code>Bob</code>/<code>bob@acmewidgets.net</code>, <code>Harry</code>/<code>harry@acmewidgets.net</code>).</li>
                    </ul>
                </li>
                <li class="extras-instructions-warning">If your test form has other fields, that's alright, <b>as long as they are not marked as required</b>, thus triggering an error upon submit since they'll be empty.</li>
                <li>The template code includes various approaches to manual and semi-manual options.</li>
            </ol>
        </p>
    </div>

{% endblock %}