{% extends "express-forms-demo/_layout" %}

{% set pageTitle = "Manual Example" %}
{% set page = "manual" %}

{% block content %}

    <h1>Manual Example</h1>

    <p class="lead">
        This template serves as an example of how your form might look and feel when built completely manually.
    </p>
    <div class="alert alert-warning" role="alert">
        This template is set up to work with the demo form that the Demo Templates installer generates. You can also use this as a starting point for your own forms.
    </div>
    <hr /><br />

    {% set form = craft.expressforms.form("express-forms-demo") %}

    {# Flash Success #}
    {% if form.submittedSuccessfully %}
        <div class="alert alert-success" role="alert">
            {{ "Form has been submitted successfully!"|t }}
        </div>
    {% endif %}

    {# General Error Handling #}
    {% if not form.valid %}
        <div class="alert alert-danger" role="alert">
            {{ "Error! Please review the form and try submitting again."|t }}
            {% if form.errors|length %}
                <ul>
                    {% for error in form.errors %}
                        <li>{{ error|t }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    {% endif %}

    <h3>{{ form.name }}</h3>

    {# Automatically set Form tags with Return, CSRF and Honeypot (if enabled) #}
    {{ form.openTag({ return: '?success=1' }) }}

    <div class="form-row">
        <div class="form-group col-md-6{{ form.fields.firstName.hasErrors ? ' has-error' }}">
            <label for="firstName"{{ form.fields.firstName.isRequired ? ' class="required"' }}>
                {{ form.fields.firstName.label }}
            </label>
            <input type="text" name="firstName" id="firstName" value="{{ form.fields.firstName.value }}" class="form-control">
            <ul class="errors">
                <li>{{ "This field is required!"|t }}</li>
            </ul>
        </div>

        <div class="form-group col-md-6{{ form.fields.lastName.hasErrors ? ' has-error' }}">
            <label for="lastName"{{ form.fields.lastName.isRequired ? ' class="required"' }}>
                {{ form.fields.lastName.label }}
            </label>
            <input type="text" name="lastName" id="lastName" value="{{ form.fields.lastName.value }}" class="form-control">
            <ul class="errors">
                <li>{{ "This field is required!"|t }}</li>
            </ul>
        </div>
    </div>

    <div class="form-group{{ form.fields.email.hasErrors ? ' has-error' }}">
        <label for="email"{{ form.fields.email.isRequired ? ' class="required"' }}>
            Email Address
        </label>
        <input type="email" name="email" id="email" placeholder="name@example.com" value="{{ form.fields.email.value }}" class="form-control">
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        {% if form.fields.email.hasErrors %}
            <ul class="errors">
                {# Loop through available Errors #}
                {% for error in form.fields.email.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>

    <div class="form-group{{ form.fields.subject.hasErrors ? ' has-error' }}">
        <label for="subject"{{ form.fields.subject.isRequired ? ' class="required"' }}>
            Subject
        </label>
        <select name="subject" id="subject" class="form-control">
            <option value="">I need some help with...</option>
            <option disabled>──────────</option>
            <option{{ "My homework" in form.fields.subject.value ? " selected" }}>My homework</option>
            <option{{ "Practicing my hammer dance" in form.fields.subject.value ? " selected" }}>Practicing my hammer dance</option>
            <option{{ "Finding my belly button" in form.fields.subject.value ? " selected" }}>Finding my belly button</option>
        </select>
        <ul class="errors">
            <li>{{ "This field is required!"|t }}</li>
        </ul>
    </div>

    <div class="form-group{{ form.fields.message.hasErrors ? ' has-error' }}">
        <label for="message"{{ form.fields.message.isRequired ? ' class="required"' }}>
            {{ form.fields.message.label }}
        </label>
        <textarea name="message" id="message" rows="3" class="form-control">
            {{- form.fields.message.value -}}
        </textarea>
        <ul class="errors">
            <li>{{ "This field is required!"|t }}</li>
        </ul>
    </div>

    <div class="form-group{{ form.fields.howHeard.hasErrors ? ' has-error' }}">
        <label{{ form.fields.howHeard.isRequired ? ' class="required"' }}>
            {{ form.fields.howHeard.label }}
        </label>
        <div class="form-check">
            <label class="form-check-label" for="how-heard-newspaper">
                <input type="checkbox" class="form-check-input"
                       name="howHeard[]" id="how-heard-newspaper"
                       value="newspaper"{{ "newspaper" in form.fields.howHeard.value ? " checked" }}
                />
                Newspaper
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label" for="how-heard-radio">
                <input type="checkbox" class="form-check-input"
                       name="howHeard[]" id="how-heard-radio"
                       value="radio"{{ "radio" in form.fields.howHeard.value ? " checked" }}
                />
                Radio
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label" for="how-heard-friend">
                <input type="checkbox" class="form-check-input"
                       name="howHeard[]" id="how-heard-friend"
                       value="friend"{{ "friend" in form.fields.howHeard.value ? " checked" }}
                />
                Friend
            </label>
        </div>
        <ul class="errors">
            <li>{{ "This field is required!"|t }}</li>
        </ul>
    </div>

    <div class="form-group{{ form.fields.attachment.hasErrors ? ' has-error' }}">
        <label{{ form.fields.attachment.isRequired ? ' class="required"' }}>
            {{ form.fields.attachment.label }}
        </label>
        <div class="alert alert-warning" role="alert">
            This field won't currently work unless setup correctly in the Express Forms form builder.
        </div>
        <div class="custom-file">
            <input type="file" multiple name="attachment[]" id="attachment" class="custom-file-input">
            <label for="attachment" class="custom-file-label">{{ "Choose file"|t }}</label>
        </div>
        {% if form.fields.attachment.hasErrors %}
            <ul class="errors">
                {# Loop through available Errors #}
                {% for error in form.fields.attachment.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>

    <div class="form-group{{ form.fields.acceptTerms.hasErrors ? ' has-error' }}">
        <div class="form-check">
            <label class="form-check-label{{ form.fields.acceptTerms.isRequired ? ' required' }}" for="accept-terms">
                <input type="checkbox" class="form-check-input"
                       name="acceptTerms" id="accept-terms"
                       value="1"{{ form.fields.acceptTerms.value ? " checked" }}
                />
                {{ form.fields.acceptTerms.label }}
            </label>
        </div>
        {% if form.fields.acceptTerms.hasErrors %}
            <ul class="errors">
                {# Loop through available Errors #}
                {% for error in form.fields.acceptTerms.errors %}
                    <li>{{ error|t }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

    {{ form.closeTag }}

{% endblock %}