{$class = 'c-call-associate-deal'}
{$class_deal = 'dropdown-deal-filter'}
{$class_deal_id = uniqid($class_deal)}
{$dialog_id = uniqid($class)}

    <div class="dialog {$class}" id="{$dialog_id}">
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <form>
                <header class="dialog-header">
                    <h2>
                        [`Associate call with a deal`]
                    </h2>
                </header>

                <div class="dialog-content fields">
                    <div class="field">
                        <div class="name">[`Client`]</div>
                        <div class="value">
                            <span class="c-user-name">
                                <a href="{$wa_app_url}contact/{$contact.id}/" target="_top" data-link="top" class="c-contact-link">
                                    <i class="icon userpic c-contact-photo" style="background-image: url({waContact::getPhotoUrl($contact.id, $contact.photo, 20)|escape});"></i>
                                    {$contact.name|escape}
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="field">
                        <div class="name">[`Deal`]</div>
                        <div class="value js-deal-value">
                            {if $contact_deals}
                                <div class="c-select-deal js-select-deal">
                                    <div class="dropdown" id="{$class_deal_id}">
                                        <button class="dropdown-toggle light-gray js-visible-link flexbox space-4 align-left" type="button" style="word-break: break-all;">
                                            <span class="js-text flexbox space-4 align-left">[`Select deal`]</span>
                                        </button>
                                        <div class="dropdown-body">
                                            <ul class="menu with-icons js-deals-list">
                                                {foreach $contact_deals as $_deal}
                                                    <li>
                                                        <a href="javascript:void(0);" class="js-deal-item" data-deal-id="{$_deal.id}">

                                                            {$_funnel = $funnels[$_deal.funnel_id]|default:[]}

                                                            {$_stage = null}
                                                            {if $_funnel}
                                                                {$_stage = $funnels[$_deal.funnel_id].stages[$_deal.stage_id]}
                                                            {/if}

                                                            {$_color = ''}
                                                            {if $_stage}
                                                                {$_color = $_stage.color|default:''}
                                                            {/if}

                                                            <span class="js-text flexbox space-4">
                                                                <i class="{$_funnel.icon|default:'fas fa-briefcase'} funnel-state custom-mr-4" style="color: {$_color}; max-width: 16px"></i>
                                                                <span class="js-text--name">{$_deal.name|escape}<span class="custom-ml-4 small gray">{if !empty($_funnel.is_archived)}[`(archived)`]{/if}</span></span>
                                                                {if !$_funnel}<span class="hint">[`Funnel deleted`]</span>{/if}
                                                            </span>
                                                        </a>
                                                    </li>
                                                {/foreach}
                                                <li class="js-create-new-deal">
                                                    <a href="javascript:void(0);">
                                                        <span class="flexbox space-4">
                                                            <i class="fas fa-plus" style="max-width: 16px; margin-right: 0;"></i>
                                                            <span class="js-text">
                                                                [`Create new`]
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <input class="js-field js-deal-id" name="deal[id]" type="hidden">
                                        </div>
                                    </div>
                                    <script>
                                        ( function($) {
                                            $("#{$class_deal_id}").waDropdown();
                                        })(jQuery);
                                    </script>
                                </div>
                            {else}
                                <a href="javascript:void(0);" class="inline-link js-create-new-deal">
                                    <span class="js-text">
                                        [`Create deal`]
                                    </span>
                                    <input class="js-field js-deal-id" name="deal[id]" type="hidden">
                                </a>
                            {/if}

                            <div class="c-select-funnel hidden js-select-funnel">
                                {$_active_funnel = reset($funnels)}
                                {if !empty($new_deal.funnel_id) && !empty($funnels[$new_deal.funnel_id])}
                                    {$_active_funnel = $funnels[$new_deal.funnel_id]}
                                {/if}

                                <div class="c-funnels-list" id="c-funnels-list">
                                    <div class="dropdown" id="dropdown-funnel-filter">
                                        <button class="dropdown-toggle light-gray js-visible-link" type="button">
                                            <span class="js-text">
                                                {if !empty($_active_funnel.color)}
                                                    <i class="{$_active_funnel.icon|default:'fas fa-briefcase'} custom-pr-4 funnel-state" style="color: {$_active_funnel.color}"></i>
                                                {/if}
                                                <span class="js-name">{$_active_funnel.name|escape}</span>
                                            </span>
                                        </button>
                                        <div class="dropdown-body">
                                            <ul class="menu with-icons">
                                                {strip}
                                                    {foreach $funnels as $_funnel}
                                                        {if !empty($_funnel.is_archived)}
                                                            {continue}
                                                        {/if}
                                                        <li class="{if $new_deal.funnel_id == $_funnel.id}selected{/if}">
                                                            <a href="javascript:void(0);" data-id="{$_funnel.id|escape}">
                                                                {if !empty($_funnel.color)}
                                                                    <i class="{$_funnel.icon|default:'fas fa-briefcase'} custom-pr-4 funnel-state" style="color: {$_funnel.color|escape}"></i>
                                                                {/if}
                                                                {$_funnel.name|escape}
                                                            </a>
                                                        </li>
                                                    {/foreach}
                                                {/strip}
                                            </ul>
                                        </div>
                                    </div>
                                    <input class="js-field js-select-deal-funnel" name="deal[funnel_id]" type="hidden" value="{$_active_funnel.id|escape}">

                                    <script>
                                        ( function($) {
                                            var $wrapper = $("#c-funnels-list"),
                                                $visibleLink = $wrapper.find(".js-visible-link"),
                                                $dropdown = $wrapper.find("#dropdown-funnel-filter"),
                                                $field = $wrapper.find(".js-field"),
                                                $menu = $wrapper.find(".menu");
                                            $dropdown.waDropdown();
                                            $menu.on("click", "a", function () {
                                                var $link = $(this);
                                                $visibleLink.find(".js-text").html($link.html());

                                                $menu.find(".selected").removeClass("selected");
                                                $link.closest("li").addClass("selected");

                                                /*$menu.hide();
                                                setTimeout( function() {
                                                    $menu.removeAttr("style");
                                                }, 200);*/

                                                var id = $link.data("id");
                                                $field.val(id).trigger("change");
                                            });

                                           // $.crm.renderSVG($wrapper);

                                        })(jQuery);
                                    </script>
                                </div>

                                <div class="js-select-stage-wrapper" style="display: inline-block;">
                                    {include file="templates/actions/deal/DealStagesByFunnel.html" selected_stage=$new_deal.stage_id inline}
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="field js-deal-name-field hidden">
                        <div class="name">
                            [`Deal name`]
                        </div>
                        <div class="value">
                            <input name="deal[name]" class="long js-deal-name" type="text" />
                        </div>
                    </div>

                    <div class="js-errors-place"></div>
                </div>

                <footer class="dialog-footer">
                    <input type="hidden" name="call_id" value="{$call.id}"/>
                    <div class="c-footer-actions js-dialog-footer">
                        <input class="button js-submit" type="submit" value="[`Associate`]" disabled>
                        <a class="button light-gray js-close-dialog js-cancel-dialog" href="javascript:void(0);">[`Cancel`]</a>
                    </div>
                </footer>
            </form>
        </div>

        <script>
            ( function($) {
                var $body = $(window.top.document).find("body");
                var $wrapper = $('#{$dialog_id}');
                //var $dialog_inst = $dialog.data('dialog');
                //$.waDialog({
                 //   html: $dialog.show(),
                  //  onOpen: function($wrapper) {
                        new CRMCallAssociateDealDialog({
                            $wrapper: $wrapper
                        });
                   // }
               // });
            })(jQuery);
        </script>
    </div>