{if $chatModeEnabled}
{component class="MAILBOX_CMP_ChatUserList"}
{/if}

<div class="ow_chat_dialog_wrap" id="dialogsContainer">

    <div class="ow_chat_selector ow_hidden">
        <div class="ow_chat_block">
            <div class="ow_selector_panel">
                <a class="ow_btn_dialogs" href="javascript://"><span></span></a>
                <span class="ow_dialog_count">0</span>
                <span class="ow_count_wrap" style="display: none;">
                    <span class="ow_count_bg ow_count_active">
                        <span class="ow_count">0</span>
                    </span>
                </span>
            </div>
            <div class="ow_chat_selector_list ow_tooltip ow_tooltip_bottom_left ow_hidden">
                <div class="ow_tooltip_body">
                    <ul class="ow_chat_selector_items"></ul>
                </div>
                <div class="ow_tooltip_tail"><span></span></div>
            </div>
        </div>
    </div>

    {if $mailModeEnabled && $isAuthorizedSendMessage}
    {component class="MAILBOX_CMP_NewMessage"}
    {/if}
</div>

<div id="im_sound_player_audio_container" style="position: fixed; left: -1000px; top: -1000px;">
    <audio id="im_sound_player_audio" src="{$im_sound_url}" ></audio>
</div>

<div id="mailbox_prototypes" style="display: none;">

    <ul id="ow_chat_selector_items_proto">
        <li class="ow_chat_selector_item ow_sets_button ow_hidden">
            <a href="javascript://" id="chatSelectorContactItemDisplayName"></a>
            <span class="ow_count_wrap">
                <span class="ow_count_bg ow_count_active" style="display: none;" id="chatSelectorContactItemCounterBlock">
                    <span class="ow_count" id="chatSelectorContactItemCounter">0</span>
                </span>
            </span>
        </li>
    </ul>

    <div class="ow_chat_dialog" id="dialogPrototypeBlock">
        <div class="ow_chat_block">
            <div class="ow_author_block ow_chat_hover clearfix">
                <div class="ow_vertical_puller"></div>
                <div class="ow_diagonal_puller"></div>
                <div class="ow_horizontal_puller"></div>
                <a href="javascript://" target="_blank" class="ow_chat_in_item_author_href ow_chat_in_item_photo_wrap" id="dialogProfileUrl">
                    <span class="ow_chat_in_item_photo"><img title="" alt="" src="{$avatarUrl}" height="32px" width="32px" id="dialogProfileAvatarUrl"></span>
                </a>
                <a href="javascript://" class="ow_chat_item_author_wrap" id="dialogMinimizeMaximizeBtn">
                    <span class="ow_chat_item_media_buttons ow_left" data-type="media_buttons"></span>
                    <span class="ow_chat_item_author">
                        <span class="ow_chat_in_item_author clearfix" id="dialogProfileDisplayName"></span>
                        <div class="ow_chat_status" id="dialogProfileStatus"></div>
                    </span>
                </a>
                <a class="ow_btn_close" href="javascript://" id="dialogCloseBtn"><span></span></a>
            </div>
            <!--<div class="ow_chat_disabled_subject_block" id="dialogSubjectBlock">-->
                <!--<span id="dialogSubject"></span>-->
            <!--</div>-->
            <div class="ow_chat_in_dialog_wrap">
                <div style="display: none;" class="ow_dialog_date_cap sticky" id="dialogStickyDateCapBlock">
                    <span id="dialogStickyDateCap"></span>
                </div>
                <div class="ow_chat_in_dialog">
                    <div class="ow_dialog_items_wrap" id="dialogLog">
                        <p class="no_messages_yet hidden">{text key='mailbox+no_messages_yet'}</p>
                    </div>
                    <div class="ow_chat_preloader" id="dialogPreloader"></div>
                </div>
            </div>
            {if $isAuthorizedReplyToMessage}
            <div class="ow_chat_message_block chat_actions_buttons_container">
                <div class="ow_chat_message" id="dialogMessageFormBlock">
                    <span class="ow_attachment_icons">
                        <div class="ow_attachments clearfix">
                            <a class="attach" href="javascript://" id="dialogAttachmentsBtn"></a>
                        </div>
                    </span>
                    <input type="submit" id="newMessageSendBtn" name="newMessageSendBtn" />
                    <textarea id="dialogTextarea" placeholder="{text key='mailbox+text_message_invitation' escape=true}"></textarea>
                    <span class="hidden_chat_input"></span>
                    <a href="javascript://" class="ow_chat_attach_btn"></a>
                </div>
            </div>
            <div class="ow_chat_message_block" style="display: none;" id="dialogUserIsUnreachable">
                <span style="padding: 8px; text-align: center; display:block;"  id="dialogUserIsUnreachableText">{text key='mailbox+user_is_unreachable'}</span>
            </div>
            {else}
                {if $replyToMessageActionPromotedText != ''}
                <div class="ow_smallmargin ow_anno ow_nocontent">{$replyToMessageActionPromotedText}</div>
                {/if}
            {/if}
        </div>
    </div>

    <div class="clearfix" id="dialogChatMessagePrototypeBlock">
        <div class="clearfix">
            <a id="avatar" href="javascript://" target="_blank"
               class="ow_chat_in_item_author_href ow_chat_in_item_photo_wrap">
                <span class="ow_right" style="margin: 5px;">
                    <span class="ow_chat_item_photo">
                        <span class="ow_chat_in_item_photo">
                            <img width="32px" height="32px" alt="contact Item Avatar Url"
                                 id="contactItemAvatarUrl" src="{$avatarUrl}"/>
                        </span>
                    </span>
                </span>
            </a>
            <div id="message_item" class="ow_dialog_item">
                <div class="ow_dialog_in_item " id="dialogMessageWrapper">
                    <div class="ow_chat_reply" id="replyMessage" style="background: rgba(130, 130, 130, 0.3) !important;padding:  5px;margin: 5px;display: none !important;">
                        <div class="sender"></div>
                        <div class="msg">
                            <p class="msg"></p>
                        </div>
                    </div>
                    <div id="select_link"><p id="dialogMessageText" dir="auto"></p></div>
                </div>
                <i></i>
            </div>
        </div>
    </div>

    <div id="dialogReplyToPrototypeBlock" class="ow_mailbox_reply_to clearfix message">
        <a id="close" class="ow_btn_close ow_right" href="javascript://" style="margin-top: 10px;"><span></span></a>
        <div style="margin-top: 2px;" class="ow_right">
            <span>{text key='mailbox+reply_to'}</span>
        </div>
        <div class="ow_dialog_item odd history">
            <div class="ow_dialog_in_item " id="dialogMessageWrapper">
                <p id="dialogMessageText"></p>
            </div>
            <i></i>
        </div>
    </div>

    <div id="toolBoxPrototypeBlock" class="ow_mailbox_reply_to clearfix message">
        <a id="close" class="ow_btn_close ow_left" href="javascript://" style="margin-top: 15px;"><span></span></a>
        <a id="delete" class="ow_mailbox_delete ow_right" title="{text key='mailbox+delete_tooltip'}" href="javascript://" style="display: none !important;"><span></span></a>
        <a class="ow_mailbox_edit ow_right" title="{text key='mailbox+edit_tooltip'}" href="javascript://" style="display: none !important;"><span></span></a>
        <a class="ow_mailbox_download ow_right" title="{text key='mailbox+download_tooltip'}" href="javascript://" style="display: none !important;"><span></span></a>
        <a class="ow_mailbox_reply ow_right" title="{text key='mailbox+reply_to_tooltip'}" href="javascript://"><span></span></a>
    </div>

    <div class="clearfix" id="dialogSysMessagePrototypeBlock">
        <div class="clearfix inner">
            <a id="avatar" href="javascript://" target="_blank"
               class="ow_chat_in_item_author_href ow_chat_in_item_photo_wrap">
                <span class="ow_right" style="margin: 5px;">
                    <span class="ow_chat_item_photo">
                        <span class="ow_chat_in_item_photo">
                            <img width="32px" height="32px" alt="contact Item Avatar Url"
                                 id="contactItemAvatarUrl"/>
                        </span>
                    </span>
                </span>
            </a>

        </div>
    </div>

    <div class="clearfix ow_dialog_item_mailchat" id="dialogMailMessagePrototypeBlock">
        <span class="ow_chat_item_photo_wrap">
            <span class="ow_chat_item_photo">
                <span class="ow_chat_in_item_photo"><img width="32px" height="32px" alt="" src="{$defaultAvatarUrl}" id="dialogMessageAvatarUrl"></span>
            </span>
        </span>
        <div class="ow_dialog_item_mailchat_text" id="dialogMessageText"></div>
    </div>

    <div class="clearfix conversation_items_time" id="dialogTimeBlockPrototypeBlock">
        <div class="ow_time_block">
            <p><span class="ow_time_text"></span><span></span></p>
        </div>
    </div>

    <div class="ow_dialog_date_cap dialogMessageGroup" id="dialogDateCapBlock">
        <span id="dialogDateCap"></span>
    </div>

    <div class="ow_mailbox_message_content_attach clearfix" id="conversationFileAttachmentContentBlockPrototype"></div>

    <div id="dialogEmbedLinkBlockPrototype">
        <div id="message_item" class="ow_dialog_item even">
            <div class="ow_dialog_in_item" id="dialogMessageWrapper">
                <div class="ow_chat_reply" id="replyMessage" style="background: rgba(130, 130, 130, 0.3) !important;padding:  5px;margin: 5px;display: none !important;">
                    <div class="sender"></div>
                    <div class="msg">
                        <p class="msg"></p>
                    </div>
                </div>
                <p id="dialogMessageText"></p>
                <div class="ow_video_attachment_preview loading_content"></div>
            </div>
        </div>
    </div>

    <div id="conversationFileAttachmentBlockPrototype">
        <div class="ow_file_attachment_info">
            <span class="ow_file_attachment_size ow_small" style="display: inline-block;" id="conversationFileAttachmentFileSize"></span>
            <span class="ow_file_attachment_name" id="conversationFileAttachmentFileName"></span>
        </div>
        <div id="dialogMessageText"></div>
    </div>
</div>