{% extends "demo/_layout" %}

{% set pageTitle = "Formatting Directly Inside Regular Template | Extras" %}

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

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: "flexbox/index.twig" }) %}

    <div class="freeform-page-heading">
        <h2>Formatting Directly Inside Regular Template</h2>
        <p>This example shows how you can add formatting code directly inside a regular template.</p>
    </div>

    {% if form %}

        {# CSS styling #}
        <style>
            button[type=submit].freeform-processing {
                display: inline-flex;
                flex-wrap: nowrap;
                align-items: center;
            }
            button[type=submit].freeform-processing:before {
                content: "";
                display: block;
                flex: 1 0 11px;
                width: 11px;
                height: 11px;
                margin-right: 10px;
                border-style: solid;
                border-width: 2px;
                border-color: transparent transparent #fff #fff;
                border-radius: 50%;
                animation: freeform-processing .5s linear infinite;
            }
            @keyframes freeform-processing {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(1turn);
                }
            }
            .freeform-pages {
                display: flex;
                padding: 0;
                margin: 0 0 10px;
                list-style: none;
            }
            .freeform-pages li {
                margin: 0 10px 0 0;
            }
            .freeform-row {
                display: flex;
                justify-content: space-between;
                margin: 0 -15px;
            }
            .freeform-row .freeform-column {
                flex: 1 0;
                padding: 10px 0;
                margin: 0 15px;
                box-sizing: border-box;
            }
            .freeform-row .freeform-column > .freeform-row:first-child {
                margin-top: -10px;
            }
            .freeform-row .freeform-column label {
                display: block;
            }
            .freeform-row .freeform-column .input-group-one-line {
                display: flex;
                flex-wrap: wrap;
            }
            .freeform-row .freeform-column .input-group-one-line label {
                padding-right: 10px;
            }
            .freeform-row .freeform-column .freeform-label {
                font-weight: bold;
            }
            .freeform-row .freeform-column .freeform-label.freeform-required:after {
                content: "*";
                margin-left: 5px;
                color: red;
            }
            .freeform-row .freeform-column .freeform-input {
                width: 100%;
                display: block;
                box-sizing: border-box;
            }
            .freeform-row .freeform-column .freeform-input[type=checkbox],
            .freeform-row .freeform-column .freeform-input[type=radio] {
                width: auto;
                display: inline;
                margin-right: 5px;
            }
            .freeform-row .freeform-column .freeform-input.StripeElement {
                padding: 4px 2px;
                border: 1px solid #ccc;
                height: 36px;
            }
            .freeform-row .freeform-column .freeform-input-only-label {
                font-weight: normal;
            }
            .freeform-row .freeform-column .freeform-input-only-label > .freeform-input {
                display: inline-block;
                width: auto;
                margin-right: 5px;
            }
            .freeform-row .freeform-column .freeform-errors {
                list-style: none;
                padding: 0;
                margin: 5px 0 0;
            }
            .freeform-row .freeform-column .freeform-errors > li {
                color: red;
            }
            .freeform-row .freeform-column .freeform-instructions {
                margin: 0 0 5px;
                font-size: 13px;
                color: #aba7a7;
            }
            .freeform-row .freeform-column.freeform-column-content-align-left {
                display: flex;
                justify-content: flex-start;
            }
            .freeform-row .freeform-column.freeform-column-content-align-left > button:not(:first-of-type) {
                margin-left: 5px;
            }
            .freeform-row .freeform-column.freeform-column-content-align-center {
                display: flex;
                justify-content: center;
            }
            .freeform-row .freeform-column.freeform-column-content-align-center > button:not(:first-of-type) {
                margin-left: 5px;
            }
            .freeform-row .freeform-column.freeform-column-content-align-right {
                display: flex;
                justify-content: flex-end;
            }
            .freeform-row .freeform-column.freeform-column-content-align-right > button:not(:first-of-type) {
                margin-left: 5px;
            }
            .freeform-row .freeform-column.freeform-column-content-align-spread {
                display: flex;
                justify-content: space-between;
            }
            .freeform-row .freeform-column.freeform-column-content-align-spread > button:not(:first-of-type) {
                margin-left: 5px;
            }
            .freeform-form-errors {
                padding: 15px;
                border: 1px solid #f5c6cb;
                background: #f8d7da;
                border-radius: 5px;
                color: #721c24;
            }
            .freeform-form-errors>p {
                margin: 0;
            }
            .freeform-form-has-errors {
                color: #721c24;
            }
        </style>

        {# Render the opening form tag #}
        {{ form.renderTag({
            attributes: {
                row: { class: "freeform-row" },
                success: { class: "freeform-form-success" },
                errors: { class: "freeform-form-has-errors" },
            }
        }) }}

        {# JS overrides #}
        <script>
        var form = document.querySelector('[data-id="{{ form.anchor }}"]');
        if (form) {
            form.addEventListener("freeform-stripe-styling", function (event) {
                event.detail.base = {
                    fontSize: "16px",
                    color: "#464747",
                    fontFamily: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
                }
            })
        }
        </script>

        {# Success and error message handling for non-AJAX forms #}
        {% if not form.settings.ajax %}
            {% if form.submittedSuccessfully %}
                <div class="freeform-alert freeform-alert-success">
                    {{ form.settings.successMessage | t('freeform') }}
                </div>
            {% endif %}
            {% if form.hasErrors %}
                <div{{ form.hasErrors }}>
                    {{ form.settings.behavior.errorMessage | t('freeform') }}

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

        {# Render page tabs if multi-page #}
        {% if form.pages|length > 1 %}
            <ul class="freeform-pages">
                {% for page in form.pages %}
                    <li {% if form.currentPage.index == page.index %}class="active"{% endif %}>
                        {% if form.currentPage.index == page.index %}
                            <b>{{ page.label }}</b>
                        {% else %}
                            {{ page.label }}
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}

        {# Display form field rows and columns #}
        {% for row in form.rows %}
            {% set width = (12 / (row|length)) %}

            <div{{ form.attributes.row }}>

                {% for field in row %}

                    {% do field.setParameters({
                        attributes: {
                            container: { class: [
                                "freeform-column",
                                "freeform-column-" ~ width,
                                "freeform-fieldtype-" ~ field.type,
                            ]},
                            input: { class: [
                                field.type != "signature" ? "freeform-input",
                            ]},
                            label: { class: [
                                "freeform-label",
                                field.inputOnly ? "freeform-input-only-label",
                                field.required ? "freeform-required",
                            ]},
                            errors: { class: "freeform-errors" },
                        },
                    }) %}

                    {{ field.render }}

                {% endfor %}
            </div>
        {% endfor %}

        {# Render the closing form tag #}
        {{ 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>
            </ol>
        </p>
    </div>

{% endblock %}