<div>
    <button class="chat-app-button" ng-show="hidden" ng-click="hidden = false"><i class="glyphicon glyphicon-comment"></i></button>
    <div class="chat-app" ng-hide="hidden">

        <div class="chat-app-container">

            <div class="side-navigation">
                <ul class="channels">
                    <li class="title">NOTIFICATIONS <span class="badge" ng-show="notificationChannel.unread">{{notificationChannel.unread}}</span></li>
                </ul>

                <ul class="channels">
                    <li class="title">CHANNELS <span class="add-action glyphicon glyphicon-plus-sign" ng-click="createChannel()"></span></li>
                    <li ng-class="{'notification': ch.unread, 'active': selectedChannel == ch}" ng-repeat="ch in publicChannels" ng-click="selectChannel(ch)">{{ch.name}}</li>
                </ul>

                <ul class="direct-messages">
                    <li class="title">DIRECT MESSAGES <span class="add-action glyphicon glyphicon-plus-sign" ng-click="searchUser()"></span></li>
                    <li ng-class="{'notification': userChannel.unread, 'active': selectedChannel == userChannel}" ng-repeat="userChannel in directChannels" ng-click="selectChannel(userChannel)">{{userChannel.name}}</li>
                </ul>

            </div>

            <ng-include src="'components/messaging/templates/conversation.html'"></ng-include>

            <div class="popup-placeholder"></div>

        </div>
    </div>
</div>
