<div ng-controller="RecentsController">
    <div class="spinner recentsSpinner" us-spinner ng-show="!doneInitialSync"> </div>
    <table class="recentsTable">
        <tbody ng-repeat="(index, room) in rooms | orderRecents"
               ng-click="selectRoom($event, room)" 
               class="recentsRoom"
               ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID), 'recentsRoomBing': (unreadBings[room.room_id]), 'recentsRoomUnread': (unreadMessages[room.room_id])}">
            <tr>
                <td ng-class="room.current_room_state.state('m.room.join_rules').content.join_rule == 'public' ? 'recentsRoomName recentsPublicRoom' : 'recentsRoomName'">
                    <span role="link" tabindex="0">{{ room.name }}</span>
                </td>
                <td class="recentsRoomSummaryUsersCount">
                    <span ng-show="undefined !== room.recent.numUsersInRoom">
                        {{ room.recent.numUsersInRoom || '1' }} {{ room.recent.numUsersInRoom == 1 ? 'user' : 'users' }}                     
                    </span>
                </td>
                <td class="recentsRoomSummaryTS">
                    {{ (room.lastAnnotatedEvent.event.origin_server_ts) | date:'MMM d HH:mm' }}
                    
                    <img ng-click="leave(room.room_id); $event.stopPropagation();" src="img/close.png" width="10" height="10" style="margin-bottom: -1px; margin-left: 2px;" alt="close"/>
                </td>
            </tr>

            <tr>
                <td colspan="3" class="recentsRoomSummary">

                    <div ng-show="room.recent.me.content.membership === 'invite'">
                        {{ room.recent.inviter | mUserDisplayName: room.room_id }} invited you
                    </div>
                    
                    <div ng-hide="room.recent.me.membership === 'invite'" ng-switch="room.lastAnnotatedEvent.event.type">
                        <div ng-switch-when="m.room.member">
                            <span ng-switch="room.lastAnnotatedEvent.changed_key">
                                <span ng-switch-when="membership">
                                    <span ng-if="'join' === room.lastAnnotatedEvent.event.content.membership">
                                        {{ room.lastAnnotatedEvent.event.state_key | mUserDisplayName: room.room_id }} joined
                                    </span>
                                    <span ng-if="'leave' === room.lastAnnotatedEvent.event.content.membership">
                                        <span ng-if="room.lastAnnotatedEvent.event.user_id === room.lastAnnotatedEvent.event.state_key">
                                            {{room.lastAnnotatedEvent.event.state_key | mUserDisplayName: room.room_id }} left
                                        </span>
                                        <span ng-if="room.lastAnnotatedEvent.event.user_id !== room.lastAnnotatedEvent.event.state_key && room.lastAnnotatedEvent.event.prev_content">
                                            {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }}
                                            {{ {"invite": "kicked", "join": "kicked", "ban": "unbanned"}[room.lastAnnotatedEvent.event.prev_content.membership] }}
                                            {{ room.lastAnnotatedEvent.event.state_key | mUserDisplayName: room.room_id }}
                                        </span>
                                        <span ng-if="room.lastAnnotatedEvent.event.prev_content && 'join' === room.lastAnnotatedEvent.event.prev_content.membership && room.lastAnnotatedEvent.event.content.reason">
                                            : {{ room.lastAnnotatedEvent.event.content.reason }}
                                        </span>
                                    </span>
                                    <span ng-if="'invite' === room.lastAnnotatedEvent.event.content.membership || 'ban' === room.lastAnnotatedEvent.event.content.membership">
                                        {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }}
                                        {{ {"invite": "invited", "ban": "banned"}[room.lastAnnotatedEvent.event.content.membership] }}
                                        {{ room.lastAnnotatedEvent.event.state_key | mUserDisplayName: room.room_id }}
                                        <span ng-if="room.lastAnnotatedEvent.event.prev_content && 'ban' === room.lastAnnotatedEvent.event.prev_content.membership && room.lastAnnotatedEvent.event.content.reason">
                                            : {{ room.lastAnnotatedEvent.event.content.reason }}
                                        </span>
                                    </span>         
                                </span>
                                <span ng-switch-when="displayname">
                                    {{ room.lastAnnotatedEvent.event.user_id }} changed their display name from {{ room.lastAnnotatedEvent.event.prev_content.displayname }} to {{ room.lastAnnotatedEvent.event.content.displayname }}
                                </span>
                            </span>
                        </div>

                        <div ng-switch-when="m.room.message">
                            <div ng-switch="room.lastAnnotatedEvent.event.content.msgtype">
                                <div ng-switch-when="m.text">
                                    {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }} :
                                    <span ng-bind-html="(room.lastAnnotatedEvent.event.content.body) | escapeHTML">
                                    </span>
                                </div>

                                <div ng-switch-when="m.notice">
                                    {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }} :
                                    <span ng-bind-html="(room.lastAnnotatedEvent.event.content.body) | escapeHTML">
                                    </span>
                                </div>

                                <div ng-switch-when="m.image">
                                    {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }} sent an image
                                </div>

                                <div ng-switch-when="m.emote">
                                    <span ng-bind-html="'* ' + (room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id) + ' ' + room.lastAnnotatedEvent.event.content.body | linky:'_blank'">
                                    </span>
                                </div>

                                <div ng-switch-default>
                                    {{ room.lastAnnotatedEvent.event.content.body | linky:'_blank' }}
                                </div>
                            </div>
                        </div>

                        <div ng-switch-when="m.room.topic">
                            {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }} changed the topic to: {{ room.lastAnnotatedEvent.event.content.topic }}
                        </div>

                        <div ng-switch-when="m.room.name">
                            {{ room.lastAnnotatedEvent.event.user_id | mUserDisplayName: room.room_id }} changed the room name to: {{ room.lastAnnotatedEvent.event.content.name }}
                        </div>

                        <div ng-switch-default>
                            <div ng-if="room.lastAnnotatedEvent.event.type.indexOf('m.call.') === 0">
                                Call
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
