{$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>
    .crm-form-page .crm-form-content .crm-form-constructor .crm-form-preview-block {
        --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%;
    }
    .crm-form-page {}
</style>
{function form_field_html field=[] is_template=0}
    {$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 {if $captionplace !== 'left'}crm-caption-style-{$captionplace}{/if} {if $is_template}crm-form-field-template{/if}"
        data-id="{$field.id}"
        data-checked="{$field.checked|default:0}"
        data-type="{$type}"
    >
        <div class="flexbox full-width fields">
            <div class="crm-sorting-col">
                <i class="fas fa-grip-vertical text-light-gray sort"></i>
            </div>
            <div class="flexbox full-width wide crm-field-edit">
                <div class="field wide{if $field.id === '!agreement_checkbox' || $field.type === 'Checkbox'} custom-mt-4{/if}">
                    <div class="name for-input">
                        <div class="name-inner">
                            <div class="js-field-label">{strip}
                                {if $field.id !== '!agreement_checkbox' && $type !== 'Checkbox'}
                                    {$caption|escape}
                                {/if}
                            {strip}</div>
                            {if !empty($field.required) && $field.id !== '!captcha'}<div>*</div>{/if}
                        </div>
                    </div>
                    <div class="value js-field-input">
                        {if $type === 'Checkbox'}
                            <label class="flexbox full-width space-8">
                                <span>
                                    {$field.html}
                                </span>
                                <span class="js-field-label wide">
                                    {$caption|escape}
                                </span>
                            </label>
                        {else}
                            {$field.html}
                        {/if}
                    </div>
                </div>
                <div class="crm-actions-col js-field-edit small">
                    <a href="javascript:void(0);" class="text-light-gray crm-edit-field-link"><i class="fas fa-pen"></i></a>
                </div>
            </div>
            <div class="crm-actions-col small">
                <a href="javascript:void(0);" class="crm-delete-field-link text-light-gray"><i class="fas fa-trash-alt delete"></i></a>
            </div>
        </div>
    </div>
{/function}

{function form_available_field field=[] classes=[] disabled=false}
    {$_is_contact_field = $field.form_field_type === crmFormConstructor::FIELD_TYPE_CONTACT}
    <li data-id="{$field.id}"
        data-form-field-type="{$field.form_field_type}"
        {if $_is_contact_field}
            data-person-enabled="{if $field.person_enabled}1{else}0{/if}"
            data-company-enabled="{if $field.company_enabled}1{else}0{/if}"
        {/if}
        class="crm-form-field {if (!$field.is_multi && $field.checked > 0) || $disabled}crm-disabled{/if} {$classes|join:' '}">
            <a href="javascript:void(0)">{$field.name|escape}{if $field.required_always|default:''} *{/if}</a>
            {if $field.id === 'password'}
                <span class="hint">
                    [`Allows your subscriber to create a password for further authorization on your site and log in to their customer portal. Requires Email field in the form.`]
                </span>
            {/if}
    </li>
{/function}

{$_back_uri = "{$wa_app_url}settings/form/"}

<form method="post" action="{$wa_app_url}?module=settings&action=formSave{if $form.id > 0}&id={$form.id}{/if}" class="crm-form-settings-form">

    <div class="crm-form-header">
        <div class="flexbox middle">
            <a href="{$_back_uri}" class="icon size-32 back js-back-button cursor-pointer custom-mr-8"><i class="icon fas fa-arrow-circle-left"></i></a>
            <input type="text" name="form[name]" value="{if $form.id > 0}{$form.name|escape}{else}[`New form`]{/if}" placeholder="[`Form name`]" class="crm-name-input">
        </div>

        <div class="crm-form-section fields">
            <div class="fields-group">
                <div class="flexbox full-width space-16 custom-mb-24">
                    <div class="flexbox wide wrap large space-16 custom-mt-4">
                        <label class="nowrap">
                            <span class="wa-radio custom-mt-4 custom-mr-4">
                                <input type="radio" class="js-widget-container" name="form[params][widget_container]"{if !empty($form.params.widget_container) && $form.params.widget_container == 'dialog'} checked{/if} value="dialog"><span></span>
                            </span>
                            [`Dialog`]
                        </label>
                        <label class="nowrap">
                            <span class="wa-radio custom-mt-4 custom-mr-4">
                                <input type="radio" class="js-widget-container" name="form[params][widget_container]"{if !empty($form.params.widget_container) && $form.params.widget_container == 'drawer'} checked{/if} value="drawer"><span></span>
                            </span>
                            [`Drawer`]
                        </label>
                        <label class="nowrap">
                            <span class="wa-radio custom-mt-4 custom-mr-4">
                                <input type="radio" class="js-widget-container" name="form[params][widget_container]"{if empty($form.params.widget_container)} checked{/if} value=""><span></span>
                            </span>
                            [`Embed manually`]
                        </label>
                    </div>

                    <div style="max-width: 250px;">
                        {if $form.id > 0}
                            <div class="dropdown" id="dropdown-frontend-link">
                                <a class="dropdown-toggle semibold nowrap" href="javscript:void(0)">
                                    <i class="fas fa-link fa-sm custom-mr-4"></i>
                                    [`Link`]
                                </a>
                                <div class="dropdown-body right">
                                    <div class="box custom-pb-12">
                                        <a href="{$frontend_form_url}" class="c-frontend-link js-frontend-link bold small" target="_blank">
                                            {$frontend_form_url} <i class="fas fa-external-link-alt fa-xs custom-ml-2 opacity-70"></i>
                                        </a>
                                        <button class="button smaller outlined align-center width-100 custom-mt-16 js-copy-frontend-link"
                                            type="button"
                                            data-class-success="green"
                                            data-icon-default="fa-copy"
                                            data-icon-success="fa-check"
                                            data-text-default="[`Copy link`]"
                                            data-text-success="[`Copied`]"
                                            style="justify-content: center;">
                                            <span class="icon js-icon"><i class="fas fa-copy"></i></span>
                                            <span class="js-text">[`Copy link`]</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {else}
                            <div class="align-right">
                                <div class="hint">[`Form’s standalone URL:`]</div>
                                <span class="small">[`Will be available after saving`]</span>
                            </div>
                        {/if}
                    </div>
                </div>
                <div class="crm-form-section-content">
                    <div class="js-widget-manual-code"{if !empty($form.params.widget_container)} style="display: none;"{/if}>
                        <div class="flexbox full-width space-8 wrap custom-my-8">
                            <div class="hint">[`To publish this form on your website use this code:`]
                                {if $form.id > 0}
                                    <code class="crm-smarty-helper bold nowrap custom-mr-4">{literal}{$wa->crm->form({/literal}{$form.id}{literal})}{/literal}</code>
                                    <a class="icon crm-copy js-copy" data-content="{literal}{$wa->crm->form({/literal}{$form.id}{literal})}{/literal}" title="[`Copy to clipboard`]"><i class="fas fa-copy"></i></a>
                                {else}
                                    <strong>[`Will be available after saving`]</strong>
                                {/if}
                            </div>
                            {if $form.id > 0}
                                <a class="js-show-external-code small semibold nowrap" href="javascript:void(0)">[`Publishing on external site`] <i class="fas fa-caret-down"></i></a>
                            {/if}
                        </div>
                        <div class="js-external-code" style="display: none;">
                            <textarea class="small width-100" readonly><iframe frameborder="0" src="{$frontend_form_iframe_url}" id="wa-crm-iframe" name="wa-crm-iframe" marginheight="0" marginwidth="0" scrolling="no" style="width:100%; height:50px;"></iframe><script type="text/javascript" src="{$app_static_url}js/iframeResizer.min.js"></script><script type="text/javascript">iFrameResize({ heightCalculationMethod:'max' });</script></textarea>
                        </div>
                    </div>
                    <div class="js-widget-params"{if empty($form.params.widget_container)} style="display: none;"{/if}>
                    {if $has_storefronts}
                        <div class="field">
                            <div class="name for-input">
                                [`Form title`]
                            </div>
                            <div class="value">
                                <input type="text" class="long bold large" name="form[params][widget_header]" value="{$form.params.widget_header|default:''|escape}">
                            </div>
                        </div>
                        <div class="field custom-mt-4">
                            <div class="name for-input"></div>
                            <div class="value small">
                                <label>
                                    <span class="wa-checkbox custom-mr-4">
                                        <input type="checkbox" name="form[params][widget_theme]"{if !empty($form.params.widget_theme) && $form.params.widget_theme == 'dark'} checked{/if} value="dark">
                                        <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                    </span>
                                    [`Always use dark mode`]
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <h5 class="heading custom-mt-24">[`Show & hide`]</h5>
                        </div>
                        <div class="field">
                            <div class="name for-checkbox">
                                <label>
                                    <span class="wa-checkbox custom-mr-4">
                                        <input type="checkbox" class="js-widget-fab" name="form[params][widget_display_fab]"{if !empty($form.params.widget_display_fab)} checked{/if} value="1">
                                        <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                    </span>
                                    [`Floating button`]
                                </label>
                            </div>
                            <div class="value">
                                <div class="hint">[`Button color`]</div>
                                {$_colors = ["#cc5252","#cc8f52","#cccc52","#52cc52","#52cc8f","#52cccc","#528fcc","#5252cc","#8f52cc","#cc52cc","#cc528f"]}
                                {$_toggle_color = ifset($form.params['widget_display_fab_color'])|escape}
                                <div class="c-color-section js-color-selector-wrapper flexbox middle space-8">
                                    <ul class="c-colors">
                                    {strip}
                                        {foreach $_colors as $_color}
                                        <li class="c-color-wrapper">
                                            <span class="c-color-item color js-set-color {if $_toggle_color == $_color}is-active{/if}" data-color="{$_color}" style="background: {$_color};"></span>
                                        </li>
                                        {/foreach}
                                    {/strip}
                                    </ul>
                                    <div class="c-toggle-wrapper flexbox middle js-toggle-wrapper is-hidden">
                                        <input class="c-field js-color-field" type="text" name="form[params][widget_display_fab_color]" value="{$_toggle_color}" placeholder="#cc528f">
                                        <div class="c-toggle-block">
                                            <span class="c-color-item color c-toggle js-toggle" style="background: {$_toggle_color};">
                                                <i class="fas fa-eye-dropper text-white smaller"></i>
                                            </span>
                                            <div class="c-color-picker js-color-picker"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hint">[`Button text`]</div>
                                <input type="text" name="form[params][widget_display_fab_text]" value="{$form.params.widget_display_fab_text|default:''|escape}" placeholder="[`Subscribe`]">

                                <div class="hint custom-mb-0 custom-mt-16">
                                    [`Button icon`]
                                </div>
                                <section class="c-icon-section js-icon-section">
                                    {$_selected_icon = $form.params.widget_display_fab_icon|default:''}
                                    <ul class="c-icon-list">
                                        {foreach $widget_icons as $_icon}
                                            <li class="c-icon-item js-icon-item {if $_icon == $_selected_icon}selected{/if}" data-icon="{$_icon}">
                                                <i class="{$_icon}"></i>
                                            </li>
                                        {/foreach}
                                        <li class="c-icon-item js-icon-item {if empty($_selected_icon)}selected{/if}" data-icon="" title="[`No icon`]">
                                            [`no`]
                                        </li>
                                    </ul>
                                    <input name="form[params][widget_display_fab_icon]" class="js-icon-field" type="hidden" value="{$_selected_icon}">
                                </section>
                            </div>
                        </div>
                        <div class="field">
                            <div class="name for-input">
                                <label>
                                    <span class="wa-checkbox">
                                        <input type="checkbox" class="js-widget-auto-timeout" name="form[params][widget_display_on_timeout]"{if !empty($form.params.widget_display_on_timeout)} checked{/if} value="1">
                                        <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                    </span>
                                    [`On timeout`]
                                </label>
                            </div>
                            <div class="value">
                                <input type="number" class="shorter" name="form[params][widget_display_timeout]" value="{$form.params.widget_display_timeout|default:''}" placeholder="0"> [`sec`]
                            </div>
                        </div>
                        <div class="field">
                            <div class="name for-input">
                                <label>
                                    <span class="wa-checkbox">
                                        <input type="checkbox" class="js-widget-auto-scroll" name="form[params][widget_display_on_scroll]"{if !empty($form.params.widget_display_on_scroll)} checked{/if} value="1">
                                        <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                    </span>
                                    [`On scroll`]
                                </label>
                            </div>
                            <div class="value">
                                <input type="number" class="shorter" name="form[params][widget_display_scroll]" value="{$form.params.widget_display_scroll|default:''}" placeholder="0"> [`px`]
                            </div>
                        </div>
                        <div class="field">
                            <div class="name for-checkbox">
                                <label>
                                    <span class="wa-checkbox">
                                        <input type="checkbox" class="js-widget-inline" name="form[params][widget_display_custom]"{if !empty($form.params.widget_display_custom)} checked{/if} value="1">
                                        <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                    </span>
                                    [`Custom element`]
                                </label>
                            </div>
                            <div class="value">
                                <div class="hint">[`Element selector`]</div>
                                <input type="text" name="form[params][widget_display_custom_selector]" value="{$form.params.widget_display_custom_selector|default:''|escape}" placeholder=".class [`or`] #id" class="long">
                            </div>
                        </div>
                        <div class="field">
                            <div class="name for-input">
                                [`Hide upon close for`]
                            </div>
                            <div class="value">
                                <input type="number" class="shorter" name="form[params][widget_show_after_timeout]" value="{$form.params.widget_show_after_timeout|default:''}" placeholder="24"> [`hrs`]
                                <div class="hint">[`If the user closes the form intentionally, it won’t be displayed for the specified period of time.`]</div>
                            </div>
                        </div>
                        <div class="field">
                            <h5 class="heading custom-mt-24">[`Display on`]</h5>
                        </div>
                        {if !empty($domains)}
                            <table class="borderless">
                            {foreach $domains as $domain}
                                <tr data-domain="{$domain}">
                                    <td valign="top">
                                        <label class="flexbox space-8">
                                            <span class="wa-checkbox custom-mt-4">
                                                <input type="checkbox" class="js-widget-domain" value="{$domain}"{if !empty($form.params.widget_domains) && in_array($domain, $form.params.widget_domains)} checked{/if}>
                                                <span><span class="icon"><i class="fas fa-check"></i></span></span>
                                            </span>
                                            <span>{waIdna::dec($domain)}</span>
                                        </label>
                                    </td>
                                    <td class="js-widget-paths flexbox vertical space-8">
                                        {$_paths = []}
                                        {if !empty($form.params.widget_path[$domain])}
                                            {$_paths = $form.params.widget_path[$domain]}
                                            {if is_scalar($_paths)}
                                                {$_paths = [$_paths]}
                                            {/if}
                                        {/if}
                                        {foreach $_paths as $_idx => $_path}
                                        <div class="flexbox middle space-0 js-widget-path-wrapper">
                                            <input type="text" class="js-widget-path" data-domain="{$domain}" value="{$_path}" placeholder="/*">
                                            {if $_idx > 0}
                                                <button class="js-widget-del-path circle light-gray smallest"><i class="fas fa-times"></i></button>
                                            {else}
                                                <button class="js-widget-add-path circle nobutton smallest"><i class="fas fa-plus"></i></button>
                                            {/if}
                                        </div>
                                        {foreachelse}
                                        <div class="flexbox middle space-0 js-widget-path-wrapper">
                                            <input type="text" class="js-widget-path" data-domain="{$domain}" value="" placeholder="/*">
                                            <button class="js-widget-add-path circle nobutton smallest"><i class="fas fa-plus"></i></button>
                                        </div>
                                        {/foreach}
                                    </td>
                                </tr>
                            {/foreach}
                            </table>
                        {/if}

                        {if !$wa->crm->isPremium()}
                            <div class="field custom-mt-32">
                                <h5 class="heading">[`Powered by Webasyst CRM`]</h5>
                            </div>
                            <div class="field">
                                <p class="small"><i class="fas fa-star text-yellow"></i> {sprintf_wp(
                                    'To hide the link to Webasyst CRM, <a %s>buy premium ›</a>',
                                    sprintf(
                                        'href="%scrm/upgrade/"',
                                        $wa_backend_url
                                    )
                                )}</p>
                            </div>
                        {/if}
                    {else}
                        <div class="alert small custom-mt-0 custom-mb-4">
                            <div class="flexbox space-8">
                                <span class=""><i class="fas fa-exclamation-triangle text-orange"></i></span>
                                <div class="wide">
                                    [`A CRM rule must be added to the site settings to use this mode.`]
                                    <a href="{$wa_backend_url}site/#/routing/">[`Go to <em>Site</em> app`] ›</a>
                                </div>
                            </div>
                        </div>
                    {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="crm-common-errors-block"></div>

    <div class="crm-form-body crm-form-section fields">
        <div class="crm-form-constructor fields-group">
            <div class="flexbox middle full-width space-8 custom-mb-32">
                <div>
                    <div class="crm-form-section-header custom-mb-0">[`Form fields`]</div>
                    <p class="hint custom-mt-0">[`The actual web form design will depend on the CSS styles of the site where it is published.`]</p>
                </div>
                <div class="js-view-mode-toggler toggle">
                    <span class="selected" data-id="customization"><i class="fas fa-tools"></i></span>
                    <span data-id="desktop"><i class="fas fa-laptop"></i></span>
                    <span data-id="mobile"><i class="fas fa-mobile-alt"></i></span>
                </div>
            </div>
            <div class="crm-form-preview-block">
                <div class="flexbox middle full-width">
                    <div class="dropdown" id="add-field-dropdown">
                        <button class="dropdown-toggle button small rounded light-gray" type="button">
                            <i class="fas fa-plus-circle text-green add"></i> [`Add field`]
                        </button>

                        <div class="dropdown-body" style="width: 350px;">
                            <ul class="menu crm-available-fields">

                                {$_available_field_rendered_map = []}

                                {* CONTACT FIELDS ENABLED FOR PERSON *}
                                {foreach $available_fields as $field_id => $field}
                                    {$_is_contact_field = $field.form_field_type === crmFormConstructor::FIELD_TYPE_CONTACT}
                                    {if $_is_contact_field && $field['id'] !== 'password' && $field.person_enabled}
                                        {form_available_field field=$field}
                                        {$_available_field_rendered_map[$field.id] = true}
                                    {/if}
                                {/foreach}

                                {* RENDER PASSWORD FIELD *}
                                {$_password = $available_fields.password|default:null}
                                {if $_password}
                                    {form_available_field
                                        field=$_password
                                        disabled=$available_fields.email.checked <= 0}
                                    {$_available_field_rendered_map[$_password.id] = true}
                                {/if}

                                {* CONTACT FIELDS EXCLUSIVELY ENABLED FOR COMPANY *}
                                {$_exclusive_company_fields_exist = false}
                                {capture assign="_exclusive_company_fields_html"}
                                    {foreach $available_fields as $field_id => $field}
                                        {$_is_contact_field = $field.form_field_type === crmFormConstructor::FIELD_TYPE_CONTACT}
                                        {if $_is_contact_field && $field['id'] !== 'password' && !$field.person_enabled && $field.company_enabled}
                                            {form_available_field
                                                field=$field
                                                disabled=$available_fields.company.checked <= 0}
                                            {$_available_field_rendered_map[$field.id] = true}
                                            {$_exclusive_company_fields_exist = true}
                                        {/if}
                                    {/foreach}
                                {/capture}

                                {if $_exclusive_company_fields_exist}
                                    <li class="crm-form-field crm-top-bordered crm-disabled crm-hint js-hint-about-deal-fields">
                                        <span class="hint">
                                            [`To make company-only fields available, first add the “Company” field to the form.`]
                                        </span>
                                    </li>
                                    {$_exclusive_company_fields_html}
                                {/if}

                                <li class="crm-form-field crm-top-bordered crm-disabled crm-hint js-hint-about-deal-fields">
                                    <span class="hint">
                                        {sprintf('[`Select “%s” in “%s” section below to make these fields available for adding to the form.`]', '[`Enabled`]', '[`Create deal`]')}
                                    </span>
                                </li>

                                {* RENDER !DEAL_DESCRIPTION FIELD *}
                                {$_deal_description = $available_fields['!deal_description']|default:null}
                                {if $_deal_description}
                                    {form_available_field
                                        field=$_deal_description
                                        disabled=empty($form.params.create_deal)}
                                    {$_available_field_rendered_map[$_deal_description.id] = true}
                                {/if}

                                {* RENDER DEALS-FIELDS *}
                                {foreach $available_fields as $field_id => $field}
                                    {if $field.form_field_type === crmFormConstructor::FIELD_TYPE_DEAL}
                                        {form_available_field
                                            field=$field
                                            disabled=empty($form.params.create_deal)}
                                        {$_available_field_rendered_map[$field.id] = true}
                                    {/if}
                                {/foreach}

                                {* RENDER !DEAL_ATTACHMENTS FIELD *}
                                {$_deal_attachments = $available_fields['!deal_attachments']|default:null}
                                {if $_deal_attachments}
                                    {form_available_field
                                        field=$_deal_attachments
                                        classes=['crm-top-bordered']
                                        disabled=empty($form.params.create_deal)}
                                    {$_available_field_rendered_map[$_deal_attachments.id] = true}
                                {/if}

                                {* RENDER REST FIELDS *}
                                {$_classes = ['crm-top-bordered']}
                                {foreach $available_fields as $field_id => $field}
                                    {if empty($_available_field_rendered_map[$field.id])}
                                        {form_available_field field=$field classes=$_classes}
                                        {$_available_field_rendered_map[$field.id] = true}
                                        {$_classes = []}
                                    {/if}
                                {/foreach}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="crm-form-fields-block blank">
                    <div class="crm-form-fields">

                        {$_checked_fields = $form.params.fields}
                        {foreach $_checked_fields as $field}
                            {form_field_html field=$field}
                        {/foreach}

                        {foreach $available_fields as $field_id => $field}
                            {form_field_html field=$field is_template=1}
                        {/foreach}
                    </div>

                    <div class="crm-form-fields crm-form-field-submit">
                    <div class="crm-form-field" data-id="!button">
                        <div class="flexbox full-width fields">
                            <div class="crm-sorting-col">
                                <div style="visibility: hidden;"><i class="fas fa-grip-vertical"></i></div>
                            </div>
                            <div class="flexbox full-width wide crm-field-edit">
                                <div class="field wide">
                                    <div class="name for-input js-field-label" style="{if ifset($form.params.button.captionplace) === 'left'}display: none;{/if}"></div>
                                    <div class="value js-field-input">
                                        <button class="crm-form-preview-submit-button dark-gray {$form.params.button.width|default:'auto'}">
                                            {$form.params.button.caption|escape|default:'[`Submit`]'}
                                        </button>
                                    </div>
                                </div>
                                <div class="crm-actions-col crm-button-actions-col js-field-edit small">
                                    <a href="javascript:void(0);" class="text-light-gray crm-edit-field-link"><i class="fas fa-pen"></i></a>
                                </div>
                            </div>
                            <div class="" style="min-width: 36px; max-width: 36px;"></div>
                        </div>
                    </div>
                    </div>

                </div>

                <div class="crm-form-width-wrapper">
                    <input class="crm-form-width-input" type="number" value="{$form_max_width}" name="form[params][max_width]" data-css-var="--crm-form-max-width"  data-css-unit="px">
                    <div class="crm-form-width-label hint">[`Recommended 280–600 pixels. A web form can shrink and adapt if its width exceeds that of a column or the phone screen.`]</div>
                </div>

                <div class="crm-form-margins-wrapper custom-pt-32 custom-pb-16 custom-px-32">
                    <div>
                        <input type="number" name="form[params][fields_space]" value="{$fields_space}" data-css-var="--crm-form-fields-space" data-css-unit="px" class="shortest">px
                        <p class="hint">[`Vertical space between the fields and above the caption`]</p>
                    </div>
                    <div>
                        <input type="number" name="form[params][caption_space]" value="{$caption_space}" data-css-var="--crm-form-caption-space" data-css-unit="px" class="shortest">px
                        <p class="hint">[`Vertical space between label and field displayed below`]</p>
                    </div>
                    <div>
                        <input type="number" name="form[params][caption_width]" value="{$caption_width}" data-css-var="--crm-form-caption-width" data-css-unit="%" class="shortest">%
                        <p class="hint">[`Width of label displayed on the left`]</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="crm-form-section fields-group">
            <div class="crm-form-section-header">
                [`After form submission`]
            </div>
            <div class="crm-form-section-content crm-after-submit-block">
                <p class="small">[`This setting will redirect clients to any specified URL or display any text message after the form is submitted.`]</p>
                <p class="small">[`After successful submission:`]</p>

                <div class="field">
                    <div class="name for-input">
                        <label class="flexbox space-8 full-width">
                            <span class="wa-radio custom-mt-2"><input type="radio" name="form[params][after_submit]"{if !empty($form.params.after_submit) && $form.params.after_submit == 'redirect'} checked{/if} value="redirect"><span></span></span>
                            <span class="wide">
                                [`Redirect to URL`]
                            </span>
                        </label>
                    </div>
                    <div class="value">
                        <input type="text" name="form[params][redirect_after_submit]" value="{$form.params.redirect_after_submit|default:''}" placeholder="http://" style="width: 100%;">
                    </div>
                </div>

                <div class="field">
                    <div class="name">
                        <label class="flexbox space-8 full-width">
                            <span class="wa-radio custom-mt-2"><input type="radio" name="form[params][after_submit]" {if empty($form.params.after_submit) || $form.params.after_submit == 'html'} checked{/if} value="html"><span></span></span>
                            <span class="wide">
                                [`Display text instead of the form`]
                            </span>
                        </label>
                    </div>
                    <div class="value">

                        <div class="wa-editor-core-wrapper not-blank">
                            <ul class="tabs overflow-dropdown wa-editor-wysiwyg-html-toggle bordered-bottom custom-ml-8 small">
                                <li class="selected">
                                    <a href="javascript:void(0);" class="wysiwyg">[`WYSIWYG`]</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="html">HTML</a>
                                </li>
                            </ul>
                            <div class="c-editor-wrapper">
                                <textarea name="form[params][html_after_submit]">{$form.params.html_after_submit|escape|default:'[`Thanks for subscribing!`]'}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="crm-form-section fields-group">
            <div class="crm-form-section-header">
                [`Confirm registration`]
            </div>
            <div class="crm-form-section-content">
                {$email_checked = $available_fields.email.checked > 0}

                <p class="small">
                    <span class="switch smaller js-ibutton" id="js-ibutton">
                        <input type="checkbox" class="crm-confirmation-checkbox" id="js-ibutton-2" name="form[params][confirm_mail]" value="1" {if isset($form.params.confirm_mail) && $email_checked} checked{/if} {if !$email_checked}disabled="disabled"{/if}>
                    </span>
                    <label for="js-ibutton-2" data-active-text="[`Enabled`]" data-inactive-text="[`Disabled`]">[`Enabled`]</label>
                </p>

                <span class="crm-confirmation-enable-text" {if $email_checked}style="display: none;"{/if}>
                    [`To enable this option, your form must contain Email field.`]
                </span>
                <p class="small">[`An automatic notification will be sent to a subscriber‘s email address, with a special link to be clicked for a client to confirm registration. You may add extra instructions for your clients to the notification text.`]</p>

                <div class="crm-form-email-confirm-block" {if !isset($form.params.confirm_mail) || !$email_checked}style="display: none;" {/if}>
                    <div class="crm-fields">
                        <div class="crm-field">
                            <div class="crm-name">[`Subject`]</div>
                            <div class="crm-value">
                                <input type="text" name="form[params][confirm_mail_subject]" value="{$form.params.confirm_mail_subject|escape|default:'[`Please confirm your email`]'}" class="crm-subject-input">
                            </div>
                        </div>
                        <div class="crm-field">
                            <div class="crm-name">[`Text`]</div>
                            <div class="crm-value">
                                <div class="wa-editor-core-wrapper not-blank">
                                    <ul class="tabs overflow-dropdown wa-editor-wysiwyg-html-toggle bordered-bottom custom-ml-8 small">
                                        <li class="selected">
                                            <a href="#" class="wysiwyg">[`WYSIWYG`]</a>
                                        </li>
                                        <li>
                                            <a href="#" class="html">HTML</a>
                                        </li>
                                    </ul>
                                    <div class="c-editor-wrapper">
                                        {$default_txt = _w('Please follow this link to confirm your registration:')|cat:
                                        ' <a href="{CONFIRM_URL}">{CONFIRM_URL}</a>.':"\n":
                                        _w('Thank you!')}
                                        <textarea name="form[params][confirm_mail_body]">{$form.params.confirm_mail_body|escape|default:$default_txt}</textarea>
                                    </div>
                                </div>
                                <div class="hint c-hint">
                                    [`Variable &#123;CONFIRM_URL&#125; must be present in the text of your message template shown above. It will be replaced in the outgoing message with a confirmation URL that your client should click to confirm registration.`]
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="crm-after-auth-block">
                        <p class="small">[`After successful confirmation`]</p>

                        <div class="crm-line field">
                            <div class="name">
                                <label class="flexbox space-8 full-width">
                                    <span class="wa-radio custom-mt-4"><input type="radio" name="form[params][after_antispam_confirm]" value="redirect" {if isset($form.params.after_antispam_confirm) && $form.params.after_antispam_confirm === 'redirect'}checked="checked"{/if}><span></span></span>
                                    <span class="wide">
                                        [`Redirect to URL`]
                                    </span>
                                </label>
                            </div>
                            <div class="value">
                                <input type="text" name="form[params][after_antispam_confirm_url]" value="{$form.params.after_antispam_confirm_url|default:''}" placeholder="http://" style="width: 100%; min-width: auto;">
                            </div>
                        </div>

                        <div class="crm-line field">
                            <div class="name">
                                <label class="flexbox space-8 full-width">
                                    <span class="wa-radio custom-mt-4"><input type="radio" name="form[params][after_antispam_confirm]" value="text" {if empty($form.params.after_antispam_confirm) || $form.params.after_antispam_confirm !== 'redirect'}checked="checked"{/if}><span></span></span>
                                    <span class="wide">
                                        [`Display text`]
                                    </span>
                                </label>
                            </div>
                            <div class="value">
                                <div class="wa-editor-core-wrapper not-blank">
                                    <ul class="tabs overflow-dropdown wa-editor-wysiwyg-html-toggle bordered-bottom custom-ml-8 small">
                                        <li class="selected">
                                            <a href="#" class="wysiwyg">[`WYSIWYG`]</a>
                                        </li>
                                        <li>
                                            <a href="#" class="html">HTML</a>
                                        </li>
                                    </ul>
                                    <div class="c-editor-wrapper">
                                        <textarea name="form[params][after_antispam_confirm_text]" style="width: 100%; min-width: auto;">{$form.params.after_antispam_confirm_text|default:'[`Confirmed`]'}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <input type="hidden" name="form[params][_version]" value="2">
        {$blocks.form_with_contact|default:''}
        {$blocks.form_create_deal|default:''}
        {$blocks.form_responsible|default:''}

        <div class="crm-form-section fields-group">
            <div class="crm-form-section-header">
                [`Messages`]
            </div>
            <div class="crm-form-section-content">
                {$messages_block}
            </div>
        </div>

    </div>
    <div class="c-settings-footer bottombar sticky">
        <div class="c-footer-actions flexbox middle full-width">
            <div>
                {$wa->csrf()}
                <input type="submit" class="button" value="[`Save`]">
                <a class="button light-gray js-c-cancel-link" href="javascript:void(0);">[`Cancel`]</a>
                <span class="crm-loading" style="display: none;">
                    <i class="fas fa-spinner fa-spin loading"></i>
                    </span>
                <span class="crm-success-status" style="display: none;">
                        [`Saved`] <i class="fas fa-check-circle yes"></i>
                    </span>
            </div>
            {if $form.id > 0}
                <div>
                    <div class="crm-delete-link-wrapper">
                        <a href="javascript:void(0);" class="button light-gray smaller crm-delete-form-link desktop-only">
                            <i class="fas fa-trash-alt delete custom-mr-4 text-red"></i> [`Delete this form`]
                        </a>
                        <a href="javascript:void(0);" class="button light-gray crm-delete-form-link mobile-only" title="[`Delete this form`]">
                            <i class="fas fa-trash-alt delete text-red"></i>
                        </a>
                        <a href="javascript:void(0);" class="button light-gray crm-delete-form-link tablet-only" title="[`Delete this form`]">
                            <i class="fas fa-trash-alt delete text-red"></i>
                        </a>
                    </div>
                </div>
            {/if}
        </div>
    </div>
</form>