{% extends "demo/_layout" %}

{% set pageTitle = "Freeform Form Element Field Type | Extras" %}

{# Replace 'freeform-test' with your Craft Entry slug #}
{% set entry = craft.entries().slug('freeform-test').one %}

{% block content %}

    <div class="freeform-page-heading">
        <h2>Freeform Form Element Field Type</h2>
        <p>This example will show how to display and adjust forms that are assigned to Craft Entries via the Freeform Form element field type.</p>
    </div>

    {# Make sure the test Craft entry exists #}
    {% if entry %}

        <div class="freeform-notice{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>Craft Entry:</p>
            <h4>{{ entry.title }} <small>(#{{ entry.id }})</small></h4>
            <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
        </div>

        {# Make sure the test Freeform Form field type exists #}
        {% if entry['freeformForm'] is defined %}
            {# Check if there's a value for the Freeform Form field type #}
            {% if entry.freeformForm  | length %}
                <h3 class="freeform-form-title">{{ entry.freeformForm.name }}</h3>
                {# Apply additional parameters as you please #}
                {{ entry.freeformForm.render({
                    formattingTemplate: pageTemplateFile,
                    id: "my-test-form",
                    overrideValues: {
                        productTitle: entry.title,
                    }
                }) }}
            {% else %}
                <p class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
                    You currently do not have a form assigned to this Craft Entry.
                </p>
            {% endif %}
        {% else %}
            <p class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
                You currently do not have a Freeform Form field type with the handle of <code>freeformForm</code> added to this Craft Section.
            </p>
        {% endif %}

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must correctly load an existing Craft Entry with a slug of <code>freeform-test</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 on your test from:
            <ol>
                <li>
                    Make sure your test form includes the following Freeform fields at minimum, or adjust the overrides inside this template:
                    <ul>
                        <li>Product Title field (text or hidden) with handle of <code>productTitle</code>.</li>
                    </ul>
                </li>
                <li>
                    Make sure you have a Craft Entry with a slug of <code>freeform-test</code> and includes the following Craft fields at minimum, or adjust the code inside this template:
                    <ul>
                        <li>Title field</li>
                        <li>Freeform Form element field type with a handle of <code>freeformForm</code> and a form assigned to it.</li>
                    </ul>
                </li>
            </ol>
        </p>
    </div>

{% endblock %}