{% extends "demo/_layout" %}

{% set pageTitle = "Manual Rendering of Forms | Extras" %}

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

{% block content %}

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

    <div class="freeform-page-heading">
        <h2>Manual Rendering of Forms</h2>
        <p>This example shows how to manually template a basic form.</p>
    </div>

    {% if form %}

        {# Replace "demo/extras/manual-form" 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-form",
            disable: ["submitButtons"]
        }) }}

            {# 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") %}

            <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>

            <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 state.value ? "selected" }}>{{ option.label }}</option>
                    {% endfor %}
                </select>
            </div>

            {# The submit buttons will no longer be automatically inserted by Freeform with `disable: ["submitButtons"]` #}

            {# We need to set the `button` variable from `form.currentPage.buttons` in order for this to work #}
            {% set button = form.currentPage.buttons %}

            {# Complete buttons can be rendered with `button.renderSubmit`, etc, but for maximum control, you can just get the properties attributes only #}
            <button {{ button.submitRenderProps({ 'data-optional': 'attributes here' }) }}>
                {{ button.submitLabel|raw }}
            </button>
            {% if button.back %}
                <button {{ button.backRenderProps }}>
                    {{ button.backLabel|raw }}
                </button>
            {% endif %}
            {% if button.save %}
                <button {{ button.saveRenderProps }}>
                    {{ button.saveLabel|raw }}
                </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>
                    Make sure 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>
                        <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>
                    </ul>
                </li>
                <li>If your test form has other fields, that's alright, as long as they are not marked as required, 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 %}