{$_title = "[`Lead forms`]"}

<div class="crm-form-page" id="crm-form-page">

    <h1 class="c-page-header">{$_title}</h1>


    <div class="c-forms-body fields">

        <div class="crm-forms-sidebar fields-group custom-px-16">

            {if $forms}
                <div class="skeleton js-lead-forms-skeleton" style="display: none;" >
                    <div class="skeleton-header"></div>

                    <div class="flexbox full-width">
                        {for $i=1 to 3}
                            <div class="flexbox middle">
                                <span class="skeleton-list custom-my-0"></span>
                                <span class="skeleton-line custom-my-0" style="width: 150px; margin-bottom: 8px;"></span>
                            </div>
                        {/for}
                    </div>

                    <div class="fields custom-mt-48">
                        {for $i=1 to 5}
                            <div class="field">
                                <div class="name">
                                    <span class="skeleton-line"></span>
                                </div>
                                <div class="value">
                                    <span class="skeleton-custom-box" style="width: 450px; height: 40px;"></span>
                                </div>
                            </div>
                        {/for}
                    </div>
                </div>

                <ul class="menu c-form-list">
                    {foreach $forms as $_form}
                        <li data-id="{$_form.id}" class="c-form-item">
                            <a href="{$wa_app_url}settings/form/{$_form.id}/" class="flexbox middle">
                                <img src="{$wa_app_static_url}img/source/source-form.png" alt="" class="desktop-only">
                                <span class='c-name'>{$_form.name|escape}</span>

                                {if !empty($_form.funnel)}
                                    {$_funnel_name = $_form.funnel.name|escape}
                                    {$_funnel_color = $_form.funnel.color}
                                    {$_funnel_icon = $_form.funnel.icon|default:'fas fa-briefcase'|escape}
                                    <i class="{$_funnel_icon} funnel-state" style="color: {$_funnel_color}" title="{$_funnel_name}"></i>
                                    {if !empty($_form.stage)}
                                        {$stage_id = $_form.stage.id}
                                        {$_stage_name = $_form.stage.name|escape}
                                        {$_stage_color = $_form.funnel.stages[$stage_id].color}
                                        <span class="c-state" style="background: {$_stage_color}">{$_stage_name}</span>
                                    {/if}
                                {/if}
                                <div class="wide align-right">
                                    <button class="crm-delete-form-link button nobutton circle" type="button" title="[`Delete this form`]"><i class="fas fa-trash-alt delete gray"></i></button>
                                </div>
                            </a>
                        </li>
                    {/foreach}
                </ul>
            {/if}

            <ul class="list">
                <li class="custom-pl-8">
                    <a href="{$wa_app_url}settings/form/new/" class="button small rounded light-gray crm-add-new-form-link"><i class="fas fa-plus-circle text-green"></i> [`New form`]</a>
                </li>
            </ul>

            <hr class="custom-mb-8">

            <div class="fields">
                <div class="custom-px-12 custom-py-4">
                    <div class="field">
                        <div class="name"><i class="fas fa-cog"></i> [`Captcha settings`]</div>
                        <div class="value">
                            <a href="{$captcha_settings_url}" class="small">[`Select a captcha in system settings`]</a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <script>
        ( function($) {
            $.crm.title.set("{$_title}");
            new CRMSettingsForms({
                $wrapper: $('#crm-form-page'),
                messages: {
                    'delete_confirm_title': '[`Delete form`]',
                    'delete_confirm_text': '[`Are you sure?`]',
                    'delete_confirm_button': '[`Delete`]'
                }
            });
        })(jQuery);
    </script>
</div>