{$_back_uri = "{$wa_app_url}settings/message-sources/im/"}

<div class="c-settings-source-page" id="c-im-settings-source-page">
    <form class="crm-source-settings-form">

        <h1 class="c-page-header">
            <a href="{$_back_uri}" class="icon size-32 back js-back-button cursor-pointer"><i class="icon fas fa-arrow-circle-left"></i></a>
            <img src="{$icon_url}">
            {if $source.id <= 0}[`New connection to instant messenger`]{else}{$source.name|escape}{/if}
        </h1>

        <div class="c-fields-section fields">

            {$blocks.specific_settings_block|default:''}

            <div class="fields-group">
                <div class="custom-mb-24">
                    <div class="name crm-section">
                        <label for="c-askverify-checkbox">
                            [`Allow client verification requests`]
                        </label>
                    </div>
                    <div class="value switch-with-text js-crm-value-switch">
                        <input type="hidden" name="source[params][ask_verify]" value="{if !empty($source.params.ask_verify)}1{else}0{/if}" id="c-askverify-checkbox-hidden" class="js-askverify-checkbox-hidden">
                        <span class="switch smaller" id="js-askverify-switch">
                            <input type="checkbox" name="source[params][ask_verify]" value="{if !empty($source.params.ask_verify)}1{else}0{/if}" id="c-askverify-checkbox" class="js-askverify-checkbox"
                            {if !empty($source.params.ask_verify)}checked="checked"{/if}>
                        </span>
                        <label for="c-askverify-checkbox" data-active-text="[`Enabled`]" data-inactive-text="[`Disabled`]">{if !empty($source.params.ask_verify)}[`Enabled`]{else}[`Disabled`]{/if}</label>
                    </div>
                </div>
                <div class="js-askverify-params crm-askverify-params params" style="{if empty($source.params.ask_verify)}display: none{/if}">
                    <div class="field top-padded" style="margin-bottom: 16px;">
                        <div class="name">
                            [`Verification request text`]
                        </div>
                        <div class="value">
                            <textarea class="verify_request_textarea" name="source[params][verify_request]">{$source.params.verify_request|default:$default_verify_request|escape}</textarea>
                        </div>
                    </div>
                    <div class="field top-padded" style="margin-bottom: 16px;">
                        <div class="name">
                            [`Verification link text`]
                        </div>
                        <div class="value">
                            <input class="long" type="text" name="source[params][verify_request_button]" value="{$source.params.verify_request_button|default:$default_verify_request_button|escape}">
                        </div>
                    </div>
                    <div class="field top-padded" style="margin-bottom: 16px;">
                        <div class="name">
                            [`Successful verification response text`]
                        </div>
                        <div class="value">
                            <textarea name="source[params][verify_done_response]">{$source.params.verify_done_response|default:$default_verify_done_response|escape}</textarea>
                        </div>
                    </div>
                    <div class="field top-padded" style="margin-bottom: 16px;">
                        <div class="name">
                            [`Response text sent when a client was already verified`]
                        </div>
                        <div class="value">
                            <textarea name="source[params][verify_been_response]">{$source.params.verify_been_response|default:$default_verify_been_response|escape}</textarea>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="source[params][verification_key]" value="{$verification_key|escape}">
                <div class="alert small">
                    <div class="flexbox space-8">
                        <span><i class="fas fa-info-circle"></i></span>
                        <div class="wide">{sprintf_wp(
                            'Use the “%s” menu item in the reply text editing field, when communicating with a client in the “%s” section, to send a special link, which will connect the client’s user ID in the messenger app with their registered account in your CRM database. This will help you view the full client profile on the conversation screen.',
                            sprintf(
                                '<em>%s</em>',
                                _w('Request authorization')
                            ),
                            _w('Messages')
                        )} </div>
                    </div>
                </div>
            </div>

            {*<div class="field"><hr></div>*}

            {$blocks.with_contact|default:''}

            {*<div class="field"><hr></div>*}

            {$blocks.create_deal|default:''}

            {*<div class="field"><hr></div>*}

            {$blocks.responsible|default:''}

            <div class="c-settings-footer bottombar sticky">
                <div class="c-footer-actions flexbox middle full-width">
                    <div>
                        <input type="submit" class="button" value="[`Save`]">
                        <a class="button light-gray" href="{$wa_app_url}settings/message-sources/im/">[`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>
                    </span>
                    </div>
                    {if $source.id > 0}
                        <div>
                            <div class="crm-delete-link-wrapper">
                                <a href="javascript:void(0);" class="button light-gray smaller crm-delete-source-link desktop-only">
                                    <i class="fas fa-trash-alt delete custom-mr-4 text-red"></i> [`Delete this source`]
                                </a>
                                <a href="javascript:void(0);" class="button light-gray smaller crm-delete-source-link mobile-only" title="[`Delete this source`]">
                                    <i class="fas fa-trash-alt delete text-red"></i>
                                </a>
                                <a href="javascript:void(0);" class="button light-gray smaller crm-delete-source-link tablet-only" title="[`Delete this source`]">
                                    <i class="fas fa-trash-alt delete text-red"></i>
                                </a>
                            </div>
                        </div>
                    {/if}
                </div>
            </div>
        </div>
        <input type="hidden" name="source[id]" value="{$source.id}">
    </form>

    <script>
        ( function($) {
            new CRMSettingsSourceIm({
                $wrapper: $("#c-im-settings-source-page"),
                source: {$source|json_encode},
                messages: {
                    'delete_confirm_title': '[`Delete source`]',
                    'delete_confirm_text': '[`Are you sure?`]',
                    'delete_confirm_button': '[`Delete`]'
                }
            });
        })(jQuery);
    </script>

</div>