<div>
    <a class="chat-app-button" ng-show="chatAppIsHidden" ng-click="showApp()"><i class="glyphicon glyphicon-comment"></i></a>
    <div class="chat-app" ng-hide="chatAppIsHidden">

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

            <div class="side-navigation">
                <ul class="channels">
                    <li class="title" ng-click="selectChannel(notificationsChannel)">BİLDİRİMLER <span class="badge" ng-show="notificationsChannel.unread">{{notificationsChannel.unread}}</span></li>
                </ul>

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

                <ul class="direct-messages">
                    <li class="title">MESAJLAR <span class="add-action glyphicon glyphicon-plus-sign" ng-click="searchUser()"></span></li>
                    <li ng-class="{'notification': userChannel.unread, 'active': isChannelSelected(userChannel), 'online': userChannel.is_online}" 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>
