<div class="main-contents">
    <div *ngIf="showForm" class="message-form">
        <ss-messageform
            [channelLikeID]="submitContext.channelLikeID"
            [dataStore]="submitContext.dataStore"
            [teamID]="submitContext.teamID"
            [threadTs]="submitContext.threadTs"
            [initialText]="submitContext.initialText"
            [extraInfo]="submitContext.extraInfo"
            [emoji]="submitContext.emoji"
            [enable]="!submitting"
            [subTeams]="submitContext.subTeams"
            (submit)="submitForm($event)"
            (close)="closeForm()"
            (changeChannel)="onChangeChannelRequest($event)"
            (changeMessage)="onChangeMessageRequest($event)"
            (searchChannel)="onSearchChannelRequest()"
        >
        </ss-messageform>
    </div>

    <div id="channel-search-modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="pull-left">
                        <label>Message to ...</label>
                    </div>
                    <div class="pull-right">
                        <span class="glyphicon glyphicon-remove" (click)="closeSearchChannelModal()"></span>
                    </div>
                    <select name="selectedChannel" class="search-channel-form" style="width: 100%;" #selectedChannel>
                        <ng-container *ngFor="let client of slack.clients" >
                            <option *ngFor="let channel of client.memberChannels" [value]="client.teamID + '-' + channel['id']">{{client.team.name}}: {{channel['name']}}</option>
                        </ng-container>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <table class="table table-striped">
        <tr *ngFor="let info of filteredMessages" [class.selected-message]="selected(info)">
            <td>
                <img class="user-thumbnail" [src]="info.message.userThumbnail"/>
            </td>
            <td>
                <div class="header">
                    <ss-teamicon [team]="info.message.dataStore.getTeamById(info.message.teamID)"></ss-teamicon>
                    <span class="user-name" (click)="onClickSendDM(info)">{{info.message.userName}}</span>
                    <ss-channelname [channelName]="info.message.channelName" [channelID]="info.message.channelID" [teamID]="info.message.teamID"></ss-channelname>
                    <span *ngIf="info.message.isThread" class="thread">(thread)</span>
                    <span *ngIf="showTeamName" class="team-name">({{info.message.teamName}})</span>
                    <span class="glyphicon glyphicon-off solo-button" [class.icon-button]="!soloMode" [class.solo-mode]="soloMode" [class.hide-buttons]="setting.hideButtons" (click)="onClickSoloMode(info)"></span>
                    <span class="glyphicon glyphicon-volume-off muteMode icon-button" [class.hide-buttons]="setting.hideButtons" (click)="onClickMuteMode(info)"></span>
                    <a  class="timestamp" [href]="info.permalink | safeURL">{{info.message.ts | ts2time}}</a>
                </div>

                <div class="contents">
                    <span [innerHTML]="info.text | safeHtml"></span>
                    <span *ngIf="info.edited" class="edit-mark"> (edited)</span>
                </div>

                <div *ngFor="let attachment of info.attachments">
                    <ss-attachment [attachment]="attachment" [parser]="info.parser" [attachmentTextParser]="info.attachmentTextParser" [dataStore]="info.message.rawDataStore" ></ss-attachment>
                </div>

                <div *ngIf="!!info.image">
                    <a [href]="info.imageURL"><img class="shared-image" [src]="info.imageSrc" [alt]="info.imageURL"/></a>
                </div>

                <div *ngIf="info.hasFile && !info.image">
                    <a [href]="info.fileURL">{{info.filename}}</a> was uploaded.
                </div>

                <div class="buttons pull-right" [class.hide-buttons]="setting.hideButtons">
                    <span *ngIf="info.message.mine" class="glyphicon glyphicon-edit edit-button icon-button" (click)="onClickEdit(info)"></span>
                    <span *ngIf="info.message.mine" class="glyphicon glyphicon-remove message-button icon-button" (click)="onClickDelete(info)"></span>
                    <span class="glyphicon glyphicon-share-alt message-button icon-button" (click)="onClickReply(info)"></span>
                    <span class="glyphicon glyphicon-pencil message-button icon-button" (click)="onClickWrite(info)"></span>
                </div>

                <div *ngIf="info.doesReactionExist" class="reactions">
                    <div *ngFor="let reaction of info.reactions" class="reaction-container">
                        <div *ngIf="reaction.showReactedUsers" class="reaction-users">
                            <div>{{reaction.userNames}} <span style="font-weight: normal; color: #aaaaaa;">reacted with {{reaction.rawReaction}}</span></div>
                        </div>
                        <div class="reaction" [class.my-reaction]="reaction.includeMine" (click)="onClickReaction(reaction)" (mouseenter)="onMouseEnterReaction(reaction)" (mouseleave)="onMouseLeaveReaction(reaction)" >
                            <span [innerHTML]="reaction.reaction"></span>
                            <span class="reaction-count">{{reaction.count}}</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

<div class="menus">
    <div *ngFor="let mutedChannel of mutedChannels;" class="disable-mute btn btn-default btn-xs" (click)="onClickDisableMuteMode(mutedChannel.ID)">
      <span class="glyphicon glyphicon-volume-off"></span>
      <ss-teamicon [team]="mutedChannel.team"></ss-teamicon>
      <span style="font-weight: bold;" [style.color]="mutedChannel.name | channelColor">#{{mutedChannel.name}}</span>
      <span *ngIf="mutedChannel.hasUnread">({{mutedChannel.numUnread}})</span>
    </div>
    <div class="glyphicon glyphicon-wrench message-button menu-button" (click)="onClickSetting()"></div>
</div>
