<div id="templates">
    <div id="message">
        <div class="customer-chat-content-message">
            <div class="avatar customer-chat-content-message-avatar"></div>
            <div class="customer-chat-content-message-column">
                <div class="customer-chat-content-message-author"></div>
                <div class="customer-chat-content-message-time"></div>
                <div class="customer-chat-content-message-body"></div>
            </div>
            <div class="clear-both"></div>
        </div>
    </div>
    
    <div id="operator-item">
        <div class="customer-chat-content-row">
            <div class="customer-chat-label">
                <i class="avatar customer-chat-content-message-avatar-operator"></i> <span class="customer-chat-operator-name"></span>
            </div>
            <div class="customer-chat-label customer-chat-operator-mail"></div>
            <div class="customer-chat-tab-content-operators-actions">
                <a class="customer-chat-operators-edit" href="#"><i class="icon-edit"></i></a>
                <a class="customer-chat-operators-remove" href="#"><i class="icon-remove"></i></a>
            </div>
        </div>
    </div>
    
    <div id="canned-message-item">
        <div class="customer-chat-content-row">
            <div class="customer-chat-label">
                <span class="customer-chat-canned-message-name"></span>
            </div>
            <div class="customer-chat-label customer-chat-canned-message-body"></div>
            <div class="customer-chat-tab-content-canned-messages-actions">
                <a class="customer-chat-canned-messages-edit" href="#"><i class="icon-edit"></i></a>
                <a class="customer-chat-canned-messages-remove" href="#"><i class="icon-remove"></i></a>
            </div>
        </div>
    </div>
    
    <div id="tab-button-chat">
        <a href="#" class="customer-chat-tab customer-chat-tab-button"><span></span> <i class="icon-envelope new-msg"></i> <i class="icon-remove close"></i></a>
    </div>
    
    <div id="tab-content-chat">
        <div class="customer-chat-tab-content customer-chat-tab-content-chat chat-box">
            <div class="customer-chat-talk-header live">
                <div><span class="name">Guest is watching:</span> <a class="current-url" href="#" target="_blank">unknown</a></div>
            </div>
            
            <div class="customer-chat-content-messages">
                <div class="customer-chat-content-messages-wrapper"></div>
            </div>

            <div class="customer-chat-emots-menu">
                <div class="customer-chat-header-menu-triangle"></div>

                <a href="#" data-emot=":)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-1.png') ?>" alt=":)" title=":)" /></a>
                <a href="#" data-emot=";)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-2.png') ?>" alt=";)" title=";)" /></a>
                <a href="#" data-emot=":(" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-3.png') ?>" alt=":(" title=":(" /></a>
                <a href="#" data-emot=":D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-4.png') ?>" alt=":D" title=":D" /></a>
                <a href="#" data-emot=":P" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-5.png') ?>" alt=":P" title=":P" /></a>
                <a href="#" data-emot="=)" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-6.png') ?>" alt="=)" title="=)" /></a>
                <a href="#" data-emot=":|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-7.png') ?>" alt=":|" title=":|" /></a>
                <a href="#" data-emot="=|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-8.png') ?>" alt="=|" title="=|" /></a>
                <a href="#" data-emot=">:|" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-9.png') ?>" alt=">:|" title=">:|" /></a>
                <a href="#" data-emot=">:D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-10.png') ?>" alt=">:D" title=">:D" /></a>

                <a href="#" data-emot="o_O" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-11.png') ?>" alt="o_O" title="o_O" /></a>
                <a href="#" data-emot="=O" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-12.png') ?>" alt="=O" title="=O" /></a>
                <a href="#" data-emot="<3" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-13.png') ?>" alt="<3" title="<3" /></a>
                <a href="#" data-emot=":S" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-14.png') ?>" alt=":S" title=":S" /></a>
                <a href="#" data-emot=":*" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-15.png') ?>" alt=":*" title=":*" /></a>
                <a href="#" data-emot=":$" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-16.png') ?>" alt=":$" title=":$" /></a>
                <a href="#" data-emot="=B" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-17.png') ?>" alt="=B" title="=B" /></a>
                <a href="#" data-emot=":-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-18.png') ?>" alt=":-D" title=":-D" /></a>
                <a href="#" data-emot=";-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-19.png') ?>" alt=";-D" title=";-D" /></a>
                <a href="#" data-emot="*-D" class="customer-chat-emoticon"><img src="<?php echo $app->asset('img/emots/emot-20.png') ?>" alt="*-D" title="*-D" /></a>
            </div>

            <div class="customer-chat-content-message-input">
                <div class="typing-indicator"><i class="icon icon-pencil"></i></div>
                <input type="text" class="customer-chat-content-message-input-field" placeholder="Write your message" />
                <div class="customer-chat-content-message-emots-button"></div>
                <a href="#" class="btn-canned-msg">Canned <i class="icon-folder-open"></i></a>
            </div>
        </div>
    </div>
    
    <div id="dialog-install-content">
        <p>Confirm to install the application</p>
    </div>
    
    <div id="dialog-invalid-install-content">
        <p>
            Installation seems to be invalid.
            <br><br>
            It's possible that configuration settings are incorrect or there is a problem with your database.
            <br><br>
            Please double check application's settings.
        </p>
    </div>
    
    <div id="dialog-confirm" title="Remove the user?">
        <p>Are you sure you want to permanently delete this user?</p>
    </div>
    
    <div id="dialog-form-error">
        <div id="dialog-form-error" title="Form error"></div>
    </div>
    
    <div id="dialog-select-avatar-content">
        <div class="avatars-wrapper">
            <div class="avatars"></div>
        </div>
    </div>
    
    <div id="dialog-select-canned-message-content">
        <div class="canned-messages-wrapper">
            <div class="messages"></div>
        </div>
    </div>
    
    <div id="history-list-item">
        <div class="customer-chat-history-item">
            <a href="#" class="customer-chat-history-item-username"></a>
            <div class="customer-chat-history-item-time"></div>
        </div>
    </div>
    
    <div id="history-list-display-more">
        <a id="history-list-display-more" href="#">
            <div class="button-label">
                Display more
            </div>
            <div>
                <i class="icon-chevron-down"></i>
            </div>
        </a>
    </div>
    
    <div id="user-info-popover-content">
        <div class="customer-chat-talk-header-users">
            <div class="user-avatar">
                <i class="avatar customer-chat-content-message-avatar-operator"></i>
            </div>
            <div class="user-info">
                <div>
                    <span class="name">Name:</span>
                    <span id="user-popover-name" class="value"></span>
                </div>
                <div>
                    <span class="name">ID:</span>
                    <span id="user-popover-id" class="value"></span>
                </div>
                <div>
                    <span class="name">E-mail:</span>
                    <span id="user-popover-mail" class="value"></span>
                </div>
                <div>
                    <span class="name">IP:</span>
                    <span id="user-popover-ip" class="value"></span>
                </div>
            </div>
            <div class="clear-both"></div>
        </div>
        <div class="popover-space"></div>
    </div>
</div>