{strip}
    {function name="_renderFromContact" _contact=[]}
        {if isset($_contact.id)}
            <a href="{$wa_app_url}contact/{$_contact.id}/" target="_top" data-link="top" class="c-contact-link">
                <i class="icon userpic custom-mr-4" style="background-image: url({$_contact.photo_url_16});" title="{$_contact.name|escape}"></i>{$_contact.name|escape}
            </a>
            {if !empty($message.from)}
                <span class="gray">&lt;{$message.from|escape}&gt;</span>
            {/if}
        {else}
            {$_contact.name|escape}&nbsp;
            {if !empty($message.from)}
                <span class="gray">&lt;{$message.from|escape}&gt;</span>
            {/if}
        {/if}
    {/function}

    {function name="_renderToRecipient" recipient=[]}
        {if $recipient.contact_id > 0}
            <a href="{$wa_app_url}contact/{$recipient.contact_id}/" target="_top" data-link="top" class="c-contact-link">
                <i class="icon userpic custom-mr-4" style="background-image: url({$recipient.photo_url_16});" title="{$recipient.name|escape}"></i>
                {$recipient.name|escape}
            </a>
            <span class="gray">&lt;{$recipient.destination|escape}&gt;</span>
        {else}
            {$recipient.name|escape}&nbsp;
            <span class="gray">&lt;{$recipient.destination|escape}&gt;</span>
        {/if}
    {/function}

    {function name="_renderRecipient" _contact=[]}
        {if $_contact.contact_id}
            <a href="{$wa_app_url}contact/{$_contact.contact_id}/" target="_top" data-link="top" data-link="top" class="c-contact-link">
                <img src="{$_contact.photo}" alt="{$_contact.name|escape}" class="c-contact-photo">&nbsp;
                {$_contact.name|escape}
            </a>
            {if isset($_contact.destination)}
                <span class="gray">&lt;{$_contact.destination|escape}&gt;</span>
            {/if}
        {elseif !$_contact.contact_id && $_contact.name}
            {$_contact.name|escape}&nbsp;
            {if isset($_contact.destination)}
                <span class="gray">&lt;{$_contact.destination|escape}&gt;</span>
            {/if}
        {elseif isset($_contact.email)}
            <span>{$_contact.destination|escape}</span>
        {/if}
    {/function}

    <div class="dialog c-message-show-body-dialog" id="js-message-show-body-dialog">
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <header class="dialog-header">
                <div class="flexbox middle full-width space-16">
                    {if !empty($message.create_datetime)}
                        <span class="nowrap small c-text-item">
                            {$message.create_datetime|wa_datetime:humandatetime}
                        </span>
                    {/if}
                    <div class="wide flexbox middle space-4 c-message-actions">
                        <span class="c-button-items nowrap">
                        {if $message.direction === crmMessageModel::DIRECTION_IN}
                            <button class="button nobutton large circle light-gray js-message-reply" title="[`Reply`]"
                                data-message-id="{$message.id|escape}"><i class="fas fa-reply"></i></button>

                            {if $message.transport == crmMessageModel::TRANSPORT_EMAIL}
                                <button class="button nobutton large circle light-gray js-message-forward" title="[`Forward message`]" data-message-id="{$message.id|escape}"><i class="fas fa-share"></i></button>
                            {/if}
                        {/if}

                        {if $message.original}
                            <a class="button nobutton large circle light-gray js-disable-router" href="?module=file&action=downloadEml&id={$message.id}"
                                title="[`Download original`]"><i class="fas fa-arrow-down"></i></a>
                        {/if}

                        {if $is_admin}
                            <button title="[`Delete message`]" class="button nobutton circle light-gray js-delete-message"><i class="fas fa-trash-alt"></i></button>
                        {/if}
                        </span>
                    </div>
                    <button class="button nobutton large circle light-gray js-close-dialog" title="[`Close`]"><i class="fas fa-times"></i></button>
                </div>
                <div class="flexbox middle full-width space-16">
                    <h2 class="custom-mb-0 wide">{strip_tags($message.subject)|escape}</h2>
                </div>
            </header>
            <div class="dialog-content">
                <div class="fields c-message-info">
                    <div class="js-message-data">
                        <div class="field">
                            <div class="name">[`From`]</div>
                            <div class="value small">
                                {_renderFromContact _contact=$from}
                            </div>
                        </div>

                        {if !empty($message.to)}
                            <div class="field">
                                <div class="name">[`To`]</div>
                                <div class="value small">
                                    <div class="flexbox vertical" style="row-gap: 8px;">
                                        {foreach $to_list as $_recipient}
                                            <div>{_renderToRecipient recipient=$_recipient|default:0}</div>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        {/if}

                        {if !empty($copy_recipients)}
                            <div class="field">
                                <div class="name">[`Copy`]</div>
                                <div class="value small">
                                    <div class="flexbox vertical" style="row-gap: 8px;">
                                        {foreach $copy_recipients as $_recipient}
                                            <div>{_renderRecipient _contact=$_recipient}</div>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        {/if}

                        {if !empty($deal)}
                            <div class="field">
                                <div class="name for-input">[`Deal`]</div>
                                <div class="value">
                                    {if !empty($deal.id)}
                                        {$_funnel = $funnel[$deal.funnel_id]|default:[]}
                                        {if $_funnel}
                                            {$_stage = $_funnel.stages[$deal.stage_id]|default:null}
                                            {if $_stage}
                                                <i class="{$_funnel.icon|default:'fas fa-briefcase'} funnel-state" style="color: {$_stage.color|escape}" title="{$_funnel.name|escape} / {$_stage.name|escape}"></i>
                                                <a class="custom-ml-8" href="{$wa_app_url}deal/{$deal.id}/">
                                                    {strip_tags($deal.name)|escape}
                                                    {if !empty($_funnel.is_archived)}
                                                    <span class="hint custom-ml-4 nowrap"> [`(archived)`]</span>
                                                    {/if}
                                                </a>
                                            {else}
                                                [`Stage deleted`]
                                            {/if}
                                        {else}
                                            [`Funnel deleted`]
                                        {/if}
                                    {elseif !empty($deal.name)}
                                        <span style="color: #999;">{strip_tags($deal.name)|escape}</span>
                                    {/if}
                                </div>
                            </div>
                        {elseif !empty($clean_data)}
                            <div class="field">
                                <div class="name">[`Deal`]</div>
                                <div class="value">
                                    <span class="js-created-deal hidden"></span>
                                    <form class="deal-form">
                                        {$deal = $clean_data.deal}
                                        {$funnels = $clean_data.funnels}
                                        {$stages = $clean_data.stages}
                                        <div class="js-deal-value flexbox middle wrap space-4">
                                            <div class="c-deal-name hidden js-deal-name state-with-inner-icon right custom-mb-4">
                                                <input class="c-deal-name-input js-deal-name-input" type="text" name="deal[name]" autocomplete="off" placeholder="[`Type a deal name`]" />
                                                <button title="[`Cancel creation`]" class="icon c-remove-deal js-remove-deal"><i class="fas fa-times-circle text-red"></i></button>
                                            </div>
                                            <div class="c-select-deal js-select-deal custom-mb-4">
                                                <div class="dropdown small js-deals-dropdown" id="dropdown-deals-body">
                                                    <button class="dropdown-toggle button light-gray js-visible-link" type="button" style="word-break: break-word;">
                                                        <span class="js-text">[`Empty`]</span>
                                                    </button>
                                                    <div class="dropdown-body">
                                                        <ul class="menu with-icons js-deals-list">
                                                            <li class="js-create-new-deal">
                                                                <a href="javascript:void(0);">
                                                                    <span class="js-text">[`Create new`]</span>
                                                                </a>
                                                            </li>
                                                            <li class="c-empty-deal hidden js-empty-deal">
                                                                <a href="javascript:void(0);">
                                                                    <span class="js-text">[`Empty`]</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <input class="js-field js-deal-id" name="deal[id]" type="hidden" value="none">
                                            </div>

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

                                                <div id="c-funnels-list js-funnels-list custom-mb-4">
                                                    <div class="dropdown js-funnels-dropdown" id="dropdown-funnels-list-body">
                                                        <button class="dropdown-toggle button light-gray js-visible-link" type="button" style="word-break: break-word;">
                                                            <span class="js-text flexbox space-4 align-left">
                                                                {if !empty($_active_funnel.color)}
                                                                    <i class="{$_active_funnel.icon|default:'fas fa-briefcase'} 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>
                                                                            <a href="javascript:void(0);" data-id="{$_funnel.id|escape}">
                                                                                <span class="js-text flexbox space-4 align-left">
                                                                                    {if !empty($_funnel.color)}
                                                                                        <i class="{$_funnel.icon|default:'fas fa-briefcase'} funnel-state" style="margin-right: 0; color: {$_funnel.color|escape}"></i>
                                                                                    {/if}
                                                                                    <span>{$_funnel.name|escape}</span>
                                                                                </span>
                                                                            </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}">
                                                </div>
                                                    <script>
                                                        ( function($) {
                                                            $("#dropdown-funnels-list-body").waDropdown({
                                                                items: ".menu > li > a",
                                                                change: function(event, target, dropdown) {
                                                                    $(".js-select-deal-funnel").val( $(target).data("id") ).trigger('change');
                                                                }
                                                            });
                                                            $("#dropdown-deals-body").waDropdown();
                                                        })(jQuery);
                                                    </script>

                                                <div class="js-select-stage-wrapper custom-mb-4" style="vertical-align: top;">
                                                    {include file="templates/actions/deal/DealStagesByFunnel.html" selected_stage=$deal.stage_id inline}
                                                </div>
                                            </div>
                                        </div>
                                        {if $messages_in_conversation > 1}
                                        <div class="js-deal-save-details hidden small">
                                            <label class="flexbox full-width space-8 custom-mt-4">
                                                <span class="wa-radio">
                                                    <input type="radio" name="bind_type" value="conversation" checked="checked">
                                                    <span></span>
                                                </span>
                                                <span class="wide">
                                                    [`Link entire conversation to deal`]
                                                </span>
                                            </label>
                                            <label class="flexbox full-width space-8 custom-mt-4">
                                                <span class="wa-radio">
                                                    <input type="radio" name="bind_type" value="message">
                                                    <span></span>
                                                </span>
                                                <span class="wide">
                                                    [`Move this message to a separate conversation and link it to deal`]
                                                </span>
                                            </label>
                                        </div>
                                        {/if}
                                        <button class="hidden smaller js-save-deal custom-mt-8">
                                            [`Save`]
                                        </button>
                                    </form>
                                </div>
                            </div>
                        {/if}
                    </div>
                </div>

                <div class="c-message-body js-message-body" style="min-height: 50vh;">
                    <div class="">{$message.body_sanitized}</div>
                    {if $message.attachments}
                        <div class="c-attachments-block">
                            <ul class="menu c-attachments-list">
                                {foreach $message.attachments as $a}
                                    <li>
                                        <i class="icon fas fa-paperclip attachment" style="margin-right: 8px;"></i>
                                        <a class="js-disable-router" href="?module=file&action=download&id={$a.id}">{$a.name|escape}</a><span class="c-size hint">{crmHelper::formatFileSize($a.size)}</span>
                                    </li>
                                {/foreach}
                            </ul>
                        </div>
                    {/if}
                </div>

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


        </div>

        <script>
            (function ($) {

                var $dialog = $("#js-message-show-body-dialog");

                    new CRMMessageBodyDialog({
                        $wrapper: $dialog,
                        is_admin: {$is_admin|json_encode},
                        app_url: "{$wa_app_url}",
                        contact_id: {if $message.direction === 'IN'}{$from.id|default:0}{else}{$to.id|default:0}{/if},
                        message: {$message|json_encode},
                        locales: {
                            delete: "[`Delete`]",
                            delete_message: "[`Delete message`]",
                            delete_message_text: "{$delete_message_text}",
                            deal_empty: "[`Empty`]",
                            deal_create: "[`Create deal`]",
                            deal_add: "[`Add deal`]",
                            archived: "[`(archived)`]"
                        }
                    });
            })(jQuery);
        </script>
    </div>
{/strip}