{% extends "demo/_layout" %}

{% set pageTitle = "Setting Submission Limits | Extras" %}

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

{% block content %}

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

    <div class="freeform-page-heading">
        <h2>Setting Submission Limits</h2>
        <p>This example shows how to set a limit for the number of submissions a form can have.</p>
    </div>

    {% if form %}

        {# Specify the submission limit here (or grab this value from somewhere else such as another element or global variable, etc) #}
        {% set submissionLimit = 10 %}
        
        {# This optional conditional checks if the form has reached its submission limit set above #}
        {% if freeform.submissionCount(form) >= submissionLimit %}

            <div class="freeform-notice{{ colorMode == "dark" ? " freeform-notice-dark" }}">
                <h4>{{ "Submission Limit Reached!" }}</h4>
                <p>
                    This form has a limit of {{ submissionLimit }} submissions, so no more can be submitted.
                </p>
            </div>

        {% else %}

            <div class="freeform-notice{{ colorMode == "dark" ? " freeform-notice-dark" }}">
                <p>
                    This form has a limit of {{ submissionLimit }} submissions. There are currently {{ freeform.submissionCount(form) }} submissions for this form.
                </p>
            </div>

            {{ form.render({
                submissionLimit: submissionLimit,
            }) }}

        {% endif %}

    {% 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>This page template contains a hardcoded value of <code>5</code> for the submission limit. If you wish to experience the limit, you'll need to reach 5 or more submissions, or adjust the limit inside the template.</li>
                <li>This page template contains a conditional that will hide the form once the submission limit has been reached.</li>
            </ol>
        </p>
    </div>

{% endblock %}