{% extends "demo/_layout" %}

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

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

{% block content %}

    {% set form = craft.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"}) }}

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

            <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">
                {# Completely manual - for the value, it uses 'valueAsString' as opposed to 'value' since Email fields are currently stored as an array #}
                <label>Email Address</label>
                <input name="email" value="{{ email.valueAsString }}" />
                {{ 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.checked ? "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>

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

        {{ form.renderClosingTag }}

    {% else %}

        <div class="freeform-error">
            <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>
                        <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>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 %}