{$_title = "[`Field constructor`]"}
{$wrapper_id = uniqid('crm-field-constructor-wrapper-')}

<div class="crm-field-constructor-wrapper" id="{$wrapper_id}">

    <h1>{$_title}</h1>
    <div class="block double-padded crm-field-constructor">
        <div class="block not-padded fieldset crm-main-fields fields">
            <div class="c-main-fields-label field">
                <p class="small">[`Main contact fields cannot be modified or disabled.`]</p>
            </div>
            <div class="fields-group custom-mt-16">
                {foreach $fields.main as $field}
                    <div class="field">
                        <div class="name">{$field.name|escape}</div>
                        <div class="value">
                            <span class="{if $field.pStatus === 'disabled'}hint text-gray{else}small bold{/if}">[`person`]</span>
                            <span class="{if $field.cStatus === 'disabled'}hint text-gray{else}small bold{/if}">[`company`]</span>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
        <div class="block not-padded fieldset no-border crm-other-fields fields">
            <div class="custom-mt-20 flexbox middle full-width">
                <div class="heading field custom-mt-12">
                    [`Additional contact and transaction fields`]
                </div>
                <div class="nowrap c-new-field">
                    <a href="javascript:void(0);" class="button rounded light-gray crm-edit-field-link"> <i class="fas fa-plus-circle text-green"></i> [`New field`]</a>
                </div>
            </div>
            <div class="fields-group js-other-fields custom-mt-16">
                {foreach $fields.other as $field}
                    {include file="./SettingsFieldRow.inc.html" field=$field inline}
                {/foreach}
            </div>
        </div>
        <div class="clear-left"></div>
    </div>

    <script>
        $(function () {
            $.crm.title.set({$_title|json_encode});
            new crmSettingsField({
                '$wrapper': $('#{$wrapper_id}')
            });
        });
    </script>

</div>