{$is_ui13 = $wa->whichUI() == '1.3'}
{if $is_ui13}
<div class="crm-backend-order" id="js-crm-backend-order">
    <style>
        .crm-create-order-dialog .c-deals-options-list.is-overflow {
            margin-top: 0;
            max-height: 270px;
            overflow: auto;
        }
        .crm-create-order-dialog .c-deals-options-list > li {
            margin-right: 0;
            margin-left: 0;
            padding-left: 2px;
        }
        .crm-create-order-dialog .c-layout {
            display: table;
            width: 100%;
        }
        .crm-create-order-dialog .c-layout.inline {
            width: auto;
        }
        .crm-create-order-dialog .c-layout.fixed {
            table-layout: fixed;
        }
        .crm-create-order-dialog .c-layout > .c-column {
            display: table-cell;
            vertical-align: top;
        }
        .crm-create-order-dialog .c-layout > .c-column.middle {
            vertical-align: middle;
        }
        .crm-create-order-dialog .c-layout > .c-column.center {
            text-align: center;
        }
        .crm-create-order-dialog .c-layout > .c-column.right {
            text-align: right;
        }
        .crm-create-order-dialog .dialog-window {
            overflow: visible;
        }
        .crm-create-order-dialog .dialog-window .dialog-content {
            overflow: visible;
        }
        .crm-create-order-dialog .dialog-window .dialog-buttons {
            z-index: auto;
        }
        .crm-create-order-dialog .dialog-window .dialog-buttons .dialog-buttons-gradient {
            background: transparent;
            box-shadow: none;
        }
        .crm-create-order-dialog .svg-icon {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }
        .crm-create-order-dialog .svg-icon.icon16 {
            background-color: transparent;
            background-image: none;
        }
        .crm-create-order-dialog .svg-icon svg {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
        }
        .crm-create-order-dialog .svg-icon svg .is-animated {
            -webkit-transition: all 200ms linear;
            -moz-transition: all 200ms linear;
            -o-transition: all 200ms linear;
            -ms-transition: all 200ms linear;
            transition: all 200ms linear;
        }

        .crm-create-order-dialog .c-funnels-list,
        .crm-create-order-dialog .c-funnel-stages-list {
            display: inline-block;
            vertical-align: middle;
            margin: 0 0 0 8px;
        }
        .crm-create-order-dialog .c-funnels-list .dropdown > li,
        .crm-create-order-dialog .c-funnel-stages-list .dropdown > li {
            padding: 0;
        }
        .crm-create-order-dialog .c-funnels-list .dropdown > li:hover,
        .crm-create-order-dialog .c-funnel-stages-list .dropdown > li:hover {
            background: none;
        }
        .crm-create-order-dialog .c-funnels-list .dropdown > li > a,
        .crm-create-order-dialog .c-funnel-stages-list .dropdown > li > a {
            padding: 0;
            margin: 0;
        }
        .crm-create-order-dialog .c-funnels-list .c-visible-link span,
        .crm-create-order-dialog .c-funnel-stages-list .c-visible-link span {
            display: inline-block;
            max-width: 135px;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .crm-create-order-dialog .c-funnels-list .menu-v,
        .crm-create-order-dialog .c-funnel-stages-list .menu-v {
            width: 200px;
        }
        .crm-create-order-dialog .c-funnels-list .menu-v a b,
        .crm-create-order-dialog .c-funnel-stages-list .menu-v a b,
        .crm-create-order-dialog .c-funnels-list .menu-v a i,
        .crm-create-order-dialog .c-funnel-stages-list .menu-v a i {
            color: inherit;
            font-weight: normal;
            border: 0;
            font-style: normal;
        }
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-funnels-list,
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-funnel-stages-list,
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-contact-wrapper {
            position: relative;
            user-select: none
        }
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-funnels-list:after,
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-contact-wrapper:after,
        .crm-create-order-dialog .c-deals-options-list > li:not(.is-active) .c-funnel-stages-list:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            opacity: 0.6;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
            filter: alpha(opacity=60);
        }
        .crm-create-order-dialog .c-contact-wrapper {
            display: inline-block;
            line-height: 22px;
        }
        .crm-create-order-dialog .c-contact-wrapper a {
            display: inline;
            padding: 0;
            margin: 0;
        }
        .crm-create-order-dialog .c-contact-wrapper .ui-widget {
            text-align: left;
        }
        .crm-create-order-dialog .c-contact-wrapper.is-shown .c-contact {
            display: none;
        }
        .crm-create-order-dialog .c-contact-wrapper.is-shown .c-combobox {
            display: block;
        }
        .crm-create-order-dialog .c-contact-wrapper .c-contact {
            padding: 0;
        }
        .crm-create-order-dialog .c-contact-wrapper .c-contact .icon16 {
            position: relative;
            top: 2px;
            margin: 0;
            vertical-align: baseline;
        }
        .crm-create-order-dialog .c-contact-wrapper .c-contact .c-name {
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            max-width: 100px;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
        .crm-create-order-dialog .c-contact-wrapper .c-combobox {
            display: none;
        }

        .crm-create-order-dialog .dropdown .menu-v { margin-top: 0 !important; }
    </style>
{else}
<style>
    .crm-create-order-dialog .c-contact-wrapper .c-combobox {
        display: none;
    }
    .crm-create-order-dialog .c-contact-wrapper.is-shown .c-contact {
        display: none;
    }
    .crm-create-order-dialog .c-contact-wrapper.is-shown .c-combobox {
        display: block;
    }
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-funnels-list,
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-funnel-stages-list,
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-contact-wrapper {
        position: relative;
        user-select: none
    }
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-funnels-list:after,
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-contact-wrapper:after,
    .crm-create-order-dialog .c-deals-options-list > .c-list:not(.is-active) .c-funnel-stages-list:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.6;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        filter: alpha(opacity=60);
    }
    .crm-create-order-dialog .dialog-body .dialog-content {
        overflow: visible; height: auto;
    }
    .crm-create-order-dialog .dialog-body .dialog-content .js-deals-options-wrapper {
        max-height: 44vh;
    }
    .crm-create-order-dialog .dialog-body .dialog-content .c-deals-options-list.is-overflow {
        overflow-y: auto;
    }
    .crm-create-order-dialog .dialog-body .dialog-content .c-deals-options-list.is-overflow .c-list{
        line-height: normal;
    }
    .crm-create-order-dialog .dialog-body .dialog-content .c-deals-options-list.is-overflow .c-list .c-column{
        max-width: 90%;
    }
    .crm-create-order-dialog .dialog-body .dialog-content .c-deals-options-list.is-overflow .c-list .c-column label{
        text-wrap: wrap; overflow-wrap: break-word;
    }
    ul.menu > li > a.js-crm-link .crm-icon { background-size: 16px 16px; margin: 0 0.25rem 0 0; flex: 0 0 1.25rem; font-size: 1rem; position: relative; max-height: 1rem; left: 0; top: 0; }
</style>
{/if}
    {if $can_create_deal}
        {if $deal}
            {if $is_ui13}
                {strip}
                    <a href="{$wa_backend_url}crm/deal/{$deal.id}/" class="js-crm-link">
                        <i class="icon16 userpic20" style="background-image: url('{$wa_url}wa-apps/crm/img/crm96.png'); border-radius: 0;"></i><span class="bold">[`CRM deal`]</span>
                        <span class="hint" style="display: block; margin: 3px 0 0 1px;">[`Owner:`]</span>
                        <span class="hint bold" style="display: block; margin: 1px 0 0 1px;">
                            {if !empty($deal.user)}
                                {$deal.user.name|escape}
                            {else}
                                [`not assigned`]
                            {/if}
                        </span>
                    </a>
                {/strip}
            {else}
                {strip}
                <a href="{$wa_backend_url}crm/deal/{$deal.id}/" class="wrap middle js-crm-link">
                    <span style="flex: 0;"> <i class="icon userpic crm-icon" style="background-image: url('{$wa_url}wa-apps/crm/img/crm96.png'); border-radius: 0;"></i></span>
                    <span class="flexbox wrap middle">
                        <span class="bold width-100">[`CRM deal`]</span>
                        <span class="hint custom-mr-4">[`Owner:`]</span>
                        <span class="hint bold">
                            {if !empty($deal.user)}
                                {$deal.user.name|escape}
                            {else}
                                [`not assigned`]
                            {/if}
                        </span>
                    </span>

                </a>
                {/strip}
            {/if}
        {else}
            {if $is_ui13}
                {strip}

                    <a href="javascript:void(0);" class="crm-create-deal js-crm-link js-crm-create-deal" data-order="{$order_id}" data-contact="{$contact_id}">
                        <i class="icon16 userpic20" style="background-image: url('{$wa_url}wa-apps/crm/img/crm96.png'); border-radius: 0; background-position: 1px 1px; background-size: 15px 15px;"></i>
                        [`Create deal in CRM`]
                    </a>

                {/strip}
                <script>
                    ( function($) {
                        var is_locked = false;

                        $("#js-crm-backend-order").on("click", ".js-crm-create-deal", function() {
                            if (!is_locked) {
                                is_locked = true;

                                var href = "{$wa_backend_url}crm/?module=deal&action=createDialog&ui={$wa->whichUI('shop')}",
                                    data = {
                                        order_id: {$order_id|json_encode},
                                        contact_id: {$contact_id|json_encode}
                                    };

                                $.post(href, data, function(html) {
                                    $(document.body).append(html);
                                }).always( function() {
                                    is_locked = false;
                                });
                            }
                        });
                    })(jQuery);
                </script>
            {else}
                {strip}

                <a href="javascript:void(0);" class="crm-create-deal js-crm-link js-crm-create-deal" data-order="{$order_id}" data-contact="{$contact_id}">
                    <i class="icon userpic crm-icon" style="background-image: url('{$wa_url}wa-apps/crm/img/crm96.png'); border-radius: 0;"></i>
                    <span>[`Create deal in CRM`]</span>
                </a>

                {/strip}
                <script>
                    ( function($) {
                        var is_locked = false;

                        $(".js-crm-create-deal").on("click", function() {
                            if (!is_locked) {
                                is_locked = true;

                                var href = "{$wa_backend_url}crm/?module=deal&action=createDialog",
                                    data = {
                                        order_id: {$order_id|json_encode},
                                        contact_id: {$contact_id|json_encode}
                                    };

                                $.post(href, data, function(html) {
                                    $.waDialog({
                                        html: html,
                                    });
                                }).always( function() {
                                    is_locked = false;
                                });
                            }
                        });
                    })(jQuery);
                </script>
            {/if}

        {/if}
    {/if}
    <script>
        ( function($) {

            var user_no_access_to_list = {ifset($user_no_access_to_list)|json_encode};
            if (user_no_access_to_list && $.order_list && $.order_list.options) {
                $.order_list.options.view = 'table';
            }

            // move to be a first
            var $link = $(".workflow-actions .js-crm-link");
            if ($link.length === 1) {
                var $li = $link.closest("li");
                $li.prependTo($li.closest("ul"));
            }

            {if $wa->whichUI() !== '1.3' && $order_id && !empty($contact_id)}
                $.wa.loadSources([
                    { type: 'js', uri: '{$wa_url}wa-apps/crm/js/widget.contact.js?v={$wa->version()}', id: 'crm-widget-contact-js' }
                ]).then(() => {
                    new CRMContactEmbedded({
                        contact_id: {$contact_id|json_encode},
                        userpic: {$photo|json_encode},
                        show_when_available_element: document.getElementById('s-order-block'),
                        locales: {
                            link_to_contact: '[`Open customer in CRM app`]'
                        },
                        unread_message_count: {$unread_message_count|json_encode},
                        is_premium: {$wa->crm->isPremium()|json_encode}
                    });
                });
            {/if}

        })(jQuery);
    </script>

{if $is_ui13}
</div>
{/if}