
<div class="usc_app_page_wrap" style="min-height:600px">

<link rel="stylesheet" href="{$data_server}css/chat.min.css" type="text/css" media="screen">
<div class="chat_dashboard_container clearfix screenFiller">

    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
        <h5><b>VISITORS:</b></h5>
        <div id="visitor_list"></div>
    </div>

    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="chat">
            <div class="chat-header"></div>
			{if $smarty.get.request}
				<span class="chat_msg_options"><i class="fa fa-wrench" onclick="showOptions()"></i></span>
			{/if}
			<div id="options_list">
			   <ul class="app_chat_options">
			    <li id="sound_on_off_btn" onclick="soundOnOff()"><i id="sound_status"></i></li> 
				<li id="scroll_btn" onclick="scrollType()"><i class="fa fa-long-arrow-down"></i></li>
				<li id="emogi_btn" onclick="emojiPanel()"><i class="fa fa-smile-o"></i>Emoji</li>
				<li id="app_end_chat_btn" onclick="operator_end_chat({$smarty.get.request})"><i class="fa fa-power-off"></i>End chat</li>
			  </ul>
			</div>	
			
			<div class="chat_history_wrap">
				<div id="chat_history" class="chat_history"></div>
			</div>	
            <div class="chat-message">
                <form name="operator-message-form" method="POST" action="">

					<div id="usc_emoji_picker"></div>
					<div name="operator-message" id="operator-message">
						<div id="usc_wysiwyg" class="usc_wysiwyg" contenteditable="true" placeholder="Message..."></div>
						<button type="button" id="emoji_btn" class="emoji_btn_icon" style="position:absolute; right:110px;" onclick="emojiPanel()">
							<i class ="fa fa-smile-o"></i>
						</button>
	                    <button type="button" name="operator-submit-message" id="operator-submit-message" value="Send">Send</button>
					</div>
										
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
        <div class="tech_specs">
            <div id="path"></div>
            <div id="location"></div>
            <div id="browser"></div>
            <div id="platform"></div>
            <div id="screen"></div>
            <div id="ip_address"></div>
			<div id="email_address"></div>
            <div id="end_chat_btn"></div>
        </div>
    </div>

</div>

</div>

{literal}
<script>
    var jsThemeConfig = JSON.parse('{/literal}{$preset_json}{literal}');
    var requestID = '{/literal}{$smarty.get.request}{literal}';
    var chatLoaded = '{/literal}{$smarty.get.request}{literal}';
</script>
{/literal}


<script src="{$data_server}js/chat.min.js"></script>
<script src="{$data_server}js/usc_emoji.min.js"></script>