{if ifset($form.params._version) == '2'}
{$block_id = uniqid('crm-form-block-')}
{$form_id = $block_id|cat:'-form'}

{$form_max_width = $form.params.max_width|default:$form.params.formwidth|default:600}
{$fields_space = $form.params.fields_space|default:16}
{$caption_space = $form.params.caption_space|default:8}
{$caption_width = $form.params.caption_width|default:20}
<style>
    #{$block_id} {
        --crm-form-max-width: {$form_max_width}px;
        --crm-form-fields-space: {$fields_space}px;
        --crm-form-caption-width: {$caption_width}%;
        --crm-form-caption-space: {$caption_space}px;
        max-width: var(--crm-form-max-width);
        width: 100%;
    }
    .{$block_id} {}
</style>

<link rel="stylesheet" href="{$wa_app_static_url}css/form.css?{$wa->version()}">
<script src="{$wa_app_static_url}js/crm.frontend.form.js?{$wa->version()}"></script>

{$_ignore_include_jquery = false}
{if isset($options.ignore_include_jquery)}
    {$_ignore_include_jquery = $options.ignore_include_jquery}
{/if}

{if !$_ignore_include_jquery}
    <script src="{$wa_url}wa-content/js/jquery/jquery-1.11.1.min.js?v={$wa->version(true)}"></script>
    <script>
        var wa_crm_form_jquery = jQuery.noConflict(true);
    </script>
{/if}

{$_locale_string = substr($wa->locale(), 0, 2)}

{$_ignore_include_jquery_ui = false}
{if isset($options.ignore_include_jquery_ui)}
    {$_ignore_include_jquery_ui = $options.ignore_include_jquery_ui}
{/if}

{$_ignore_include_jquery_ui_css = false}
{if isset($options.ignore_include_jquery_ui_css)}
    {$_ignore_include_jquery_ui_css = $options.ignore_include_jquery_ui_css}
{/if}

{$_ignore_include_jquery_ui_js = false}
{if isset($options.ignore_include_jquery_ui_js)}
    {$_ignore_include_jquery_ui_js = $options.ignore_include_jquery_ui_js}
{/if}

{function form_field_html field=[]}
    {$captionplace = $field.captionplace|default:'left'}
    {if $field.id === '!horizontal_rule' || $field.id === '!captcha' && !empty($captcha_is_invisible)}
        {$captionplace = 'none'}
    {/if}
    {if $field.id === '!paragraph'}
        {$caption = ''}
    {elseif isset($field.caption)}
        {$caption = $field.caption}
    {else}
        {$caption = $field.name}
    {/if}
    {$type = ifset($field.type, 'Text')}

    <div class="crm-form-field field crm-caption-style-{$captionplace}" data-id="{$field.id}" data-uid="{$field.uid}">
        {if $captionplace !== 'none'}
            <div class="name for-input">
                <div class="name-inner">
                    {if $field.id !== '!agreement_checkbox' && $type !== 'Checkbox'}
                        <div>{$caption|escape}</div>
                    {/if}
                    {if !empty($field.required) && $field.id !== '!captcha'}<div>*</div>{/if}
                </div>
            </div>
        {/if}
        <div class="value">
            {if $type === 'Checkbox'}
                <label class="crm-input-checkbox flexbox space-8">
                    <span>
                        {$field.html}
                    </span>
                    <span>{strip}
                        {$caption|escape}
                    {/strip}</span>
                </label>
            {else}
                {$field.html}
                <div class="crm-error-msg-block" data-id="{$field.id}" data-uid="{$field.uid}"></div>
            {/if}
        </div>
    </div>
{/function}

<div class="crm-form-block" id="{$block_id}">

    <div class="crm-form-fields-block">
        <div class="crm-form-fields fields">
            <form id="{$form_id}" method="post" action="{$action_url}" enctype="multipart/form-data" autocomplete="off">
                    {foreach $form.params.fields as $field_id => $field}
                        {form_field_html field=$field}
                    {/foreach}

                    {* Anti Bot Honey Pot *}
                    {if !empty($form.params.antibot_honey_pot.empty_field_name)}
                    <div class="crm-form-field field" data-id="{$form.params.antibot_honey_pot.empty_field_name}" data-uid="{$form.params.antibot_honey_pot.empty_field_name}">
                        <div class="value">
                            <input type="text" name="crm_form[{$form.params.antibot_honey_pot.empty_field_name}]" value="">
                        </div>
                    </div>
                    {/if}

                    {$captionplace = $form.params.button.captionplace|default:'none'}
                    {$button_width = $form.params.button.width|default:'auto'}
                    <div class="crm-form-field field" data-id="!button" data-uid="!button">
                        <div class="name for-input" style="{if ifset($form.params.button.captionplace) === 'left'}display: none;{/if}"></div>
                        <div class="value">
                            <div class="crm-error-msg crm-error-common"></div>
                            <div class="crm-submit-button-wrapper">
                                <button class="crm-form-submit-button {$button_width}">
                                    {$form.params.button.caption|escape|default:'[`Submit`]'}
                                    {if $button_width !== 'auto'}<i class="icon16 loading crm-loading" style="display: none;"></i>{/if}
                                </button>
                                {if $button_width === 'auto'}<i class="icon16 loading crm-loading" style="display: none;"></i>{/if}
                            </div>
                        </div>

                        <input type="hidden" name="crm_form[id]" value="{$form.id}">
                        <input type="hidden" name="crm_form[!form_page_url]" value="{$page_url}">

                    </div>
            </form>

            <div class="crm-after-submit-block"></div>
        </div>
    </div>
    <div style="visibility:hidden;max-height:0;line-height:0;word-break:break-all;color:transparent;user-select:none;">{for $i=0 to 100}⠀⠀⠀{/for}</div>
</div>
<script>
    (function (jQuery) {
        crmFrontendForm('{$block_id}', false, {
            wa_url: {$wa_url|json_encode},
            wa_version: {$wa->version(true)|json_encode},
            lang: {$_locale_string|json_encode},
            jQuery: typeof wa_crm_form_jquery !== 'undefined' ? wa_crm_form_jquery : jQuery,
            validate_messages: {
                required: "{_ws('This field is required')}",
                passwords_not_match: "{_ws('Passwords do not match')}",
                email: "{_ws('Email address is not valid.')}",
                select_one_option: "{_w('Please select an option')}"
            },
            messages: {
                server_error: "[`Server error`]",
            },
            bot_hpot: {ifset($form.params.antibot_honey_pot, [])|json_encode}
        });
        if (typeof wa_crm_form_jquery !== 'undefined') {
            wa_crm_form_jquery == undefined;
        }
    })(jQuery);
</script>
{else}
{include file="./form.previous.html"}
{/if}