<div class="row">
    <div class="col-md-9">
        <div class="chatCtr">
            <div class="chat_headerCtr"
                 style="background-color: {{ chatSettings.header_bg }}; color: {{ chatSettings.header_font }}">
                <div class="chatTitle">{{ chatSettings.title }}</div>
                <div class="chatDesc">{{ chatSettings.chat_desc }}</div>
                <div class="chatPrivateMessagesBtn " ng-click="showPrivateMessages()"
                     ng-class="{ chatPrivateMessagesBtn_active: pmUsers.length > 0 }"><i class="fa fa-list"></i></div>
                <div class="chatPrivateMessageUsersCtr">
                    <a href="pm/{{pmUser.submitted_by }}" ng-repeat="pmUser in pmUsers">
                        {{ pmUser.submitted_by }}
                <span class="pmLowCount pull-right"
                      ng-class="{ pmLowCount: pmUser.total < 5, pmMidCount: pmUser.total < 12 && pmUser.total > 5, pmHighCount: pmUser.total > 12 }">{{ pmUser.total }}</span>
                    </a>
                </div>
            </div>
            <div class="chat_bodyCtr" id="chat_bodyCtr" scroll-glue>
                <div ng-show="showRoom" ng-class="{ chat_noAvatar: chatSettings.show_avatar == 2 }">
                    <div class="chat_msgWrapper" ng-repeat="message in messages">
                        <div class="chat_msgAvatar" ng-hide="chatSettings.show_avatar == 2">
                            <a href data-toggle="modal" data-target="#profileCardModal"
                               ng-click="getProfile(message.submitted_by)">
                                <img ng-src="uploads/{{ message.profile_img }}">
                            </a>
                        </div>
                        <div class="chat_msgCtr">
                            <a href data-toggle="modal" data-target="#profileCardModal"
                               ng-click="getProfile(message.submitted_by)" class="chat_msgUsername">
                                {{ message.submitted_by }}
                            </a>
                            <div class="chat_msgText" ng-bind-html="message.message | rawHtml"></div>
                            <i class="fa fa-remove text-danger removeMsgBtn" ng-show="canDelete"
                               ng-click="removeChatMsg(message, $index)"></i>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
                <div ng-hide="showRoom">
                    <div class="chat_usersOnlineWrapper" ng-repeat="userOnline in usersOnline">
                        <div class="chat_userOnlineAvatar">
                            <a href data-toggle="modal" data-target="#profileCardModal"
                               ng-click="getProfile(userOnline.username)">
                                <img ng-src="uploads/{{ userOnline.profile_img }}">
                            </a>
                        </div>
                        <div class="chat_userOnlineInfo">
                            <div class="chat_userOnlineUsername">{{ userOnline.username }}</div>
                            <a href ng-click="pmUser(userOnline.username)" class="chat_btnGreen" >Private Message</a>
                            <a href class="chat_btnGreen" data-toggle="modal" data-target="#profileCardModal"
                               ng-click="getProfile(userOnline.username)">View Details</a>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
            </div>
            <div class="chat_toolsCtr" ng-show="showRoom">
                <div class="chat_optsCtr">
                    <select class="ct_select" ng-model="messageOpts.fontFamily"
                            ng-hide="settings.font_family_btn == 2 || chatSettings.font_enabled == 2">
                        <option ng-value="font" ng-repeat="font in fonts">{{ font }}</option>
                    </select>
                    <input type="number" min="10" max="20" class="ct_fontSize" ng-model="messageOpts.fontSize"
                           ng-hide="chatSettings.size_enabled == 2">
                    <input type="text" id="ct_fontColor"
                           ng-hide="settings.color_btn == 2 || chatSettings.color_enabled == 2">
                    <button type="button" class="ct_btnDefault" ng-model="messageOpts.bold"
                            ng-click="messageOpts.bold = !messageOpts.bold"
                            ng-class="{ 'ct_btnActive': messageOpts.bold }"
                            ng-hide="settings.bold_btn == 2 || chatSettings.bold_enabled == 2"><i class="fa fa-bold"></i></button>
                    <button type="button" class="ct_btnDefault" ng-model="messageOpts.italic"
                            ng-click="messageOpts.italic = messageOpts.italic ? false : true"
                            ng-class="{ 'ct_btnActive': messageOpts.italic }"
                            ng-hide="settings.italic_btn == 2 || chatSettings.italic_enabled == 2"><i class="fa fa-italic"></i></button>
                    <button type="button" class="ct_btnDefault" style="color: #54BCD1;"
                            ng-hide="settings.emoticon_btn == 2 || chatSettings.emotes_enabled == 2"
                            data-toggle="modal" data-target="#emoticonModal"><i class="fa fa-heart"></i></button>
                    <button type="button" class="ct_btnDefault"
                            ng-hide="settings.images_btn == 2 || chatSettings.images_enabled == 4"
                            ng-click="messageOpts.message =  messageOpts.message + '[img][/img]'"><i class="fa fa-file-image-o"></i></button>
                    <button type="button" class="ct_btnDefault"
                            ng-hide="settings.url_btn == 2 || chatSettings.links_enabled == 2"
                            ng-click="messageOpts.message =  messageOpts.message + '[url][/url]'"><i class="fa fa-link"></i></button>
                    <button type="button" class="ct_btnDefault"
                            ng-hide="settings.youtube_btn == 2 || chatSettings.youtube_enabled == 2"
                            ng-click="messageOpts.message =  messageOpts.message + '[yt][/yt]'"><i class="fa fa-youtube"></i></button>
                    <button type="button" class="ct_btnDefault" data-toggle="modal" data-target="#filesModal"
                            ng-hide="settings.file_uploads == 2 || chatSettings.youtube_enabled == 2"><i class="fa fa-cloud-upload"></i></button>
                    <button type="button" class="ct_btnDefault" data-toggle="modal" data-target="#pollCenterModal"
                            ng-hide="settings.create_polls == 2 || chatSettings.polls_enabled == 2"><i class="fa fa-tasks"></i></button>
                </div>
            </div>
            <form class="chat_messageForm" name="sendChatMsgForm" ng-show="showRoom"
                  ng-submit="submitChatMessage(sendChatMsgForm.$valid)" novalidate>
                <textarea class="ct_textarea" ng-model="messageOpts.message" ng-minlength="1" required
                          ng-keydown="checkKeyCode($event, sendChatMsgForm.$valid)" ng-disabled="sendingMessage"></textarea>
                <button type="submit" class="ct_btnBlue" ng-disabled="sendingMessage">Submit</button>
                <div class="clearfix"></div>
            </form>
            <div class="chat_footerCtr" style="background-color: {{ chatSettings.footer_bg }}; color: {{ chatSettings.footer_font }}">
                <button class="chat_usersOnlineLink" href style="color: {{ chatSettings.footer_font }}"
                        ng-click="showRoom = false" ng-show="showRoom">{{ usersOnline.length }} User(s) Online</button>
                <button class="chat_usersOnlineLink" href style="color: {{ chatSettings.footer_font }}"
                        ng-click="showRoom = true" ng-hide="showRoom">Go Back</button>
                <i class="fa pull-right volumeBtn" ng-click="toggleSound()"
                   ng-class="{ 'fa-volume-up': playSound, 'fa-volume-off': !playSound }"></i>
            </div>
        </div>
        <h4 class="lobster">Embed</h4>
        <input type="text" readonly class="form-control" style="cursor: text;"
               value='<iframe width="100%" height="683" frameborder="no" scrolling="no" src="http://{{ settings.site_domain }}/embed.php?id={{ chatSettings.id }}">'>
        <p>You can embed this chat onto your website by using the following code</p>
    </div>
    <div class="col-md-3">
        <ng-include src="'app/partials/sidebar.php'"></ng-include>
    </div>
</div>

<div class="modal fade flip-effect" id="emoticonModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="fa fa-smile-o"></i> Emoticons</h4>
            </div>
            <div class="modal-body">
                <div id="loginStatus"></div>
                <img ng-repeat="emote in emotes" ng-src="assets/emotes/{{ emote.img }}" class="emote-img"
                     data-dismiss="modal" ng-click="messageOpts.message = messageOpts.message + emote.e_cmd + ' '">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>