<div id="chat-application"
  data-username="<%=user%>"
  data-token="<%=token%>"
  data-fullname="<%=fullname%>"
  data-team-admin="<%=teamAdmin%>"
  data-chat-server-url="<%=chatServerURL%>"
  data-chat-interval-session="<%=chatIntervalSession%>"
  data-plf-user-status-update-url="<%=plfUserStatusUpdateUrl%>"
  data-fullscreen="<%=fullscreen%>"
  data-db-name="<%=dbName%>"
  data-portal-uri="<%=portalURI%>"
  data-upload-file-size="<%=uploadFileSize%>"
>

  <div class="chat-sync-panel" style="display:none;"></div>
  <div class="chat-error-panel" style="display:none;"></div>
  <div class="chat-login-panel" style="display:none;"></div>
  <div class="chat-about-panel" style="display:none;"></div>

  <div class="uiGrayLightBox clearfix input-prepend no-user-selection">

    <span class="menu-standard pull-left">
      <div id="menuButton" class="uiActionWithLabel pull-left" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.settings.button.tip}">
        <i class="uiIconMenu uiIconLightGray"></i>
      </div>

    </span>
    <span class="menu-standard pull-center">

<!-- Hide  when chat room is open -->

    <div class="selectUserStatus pull-left" style="position: relative;height: 26px;margin: 16px 3px 0 4px;">
        <div class="buttonChangeStatus actionIcon dropdown" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.change.status}"><span class="chat-status-chat chat-status-invisible" style="padding: 0;margin: 0;"></span></div>
            <ul class="dropdown-menu chat-status-panel">
                <li class="chat-menu" status="available"><a href="javaScript:void(0)"><i class="chat-status chat-status-available"></i>&{exoplatform.chat.available}</a></li>
                <li class="chat-menu" status="away"><a href="javaScript:void(0)"><i class="chat-status chat-status-away"></i>&{exoplatform.chat.away}</a></li>
                <li class="chat-menu" status="donotdisturb"><a href="javaScript:void(0)"><i class="chat-status chat-status-donotdisturb"></i>&{exoplatform.chat.donotdisturb}</a></li>
                <li class="chat-menu" status="invisible"><a href="javaScript:void(0)"><i class="chat-status chat-status-invisible"></i>&{exoplatform.chat.invisible}</a></li>
            </ul>
    </div>

      <label class="pull-left" style="margin-top: 12px;">
        <a href='<%=portalURI%>/profile/<%=user%>' class='label-user' target='_blank'>&{exoplatform.chat.discussion}</a>
      </label>

    </span>
    <span class="menu-standard pull-right">

      <div id="searchButton" class="uiActionWithLabel pull-right" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.settings.button.tip}">
        <i class="uiIconSearch uiIconLightGray"></i>
      </div>
      <div id="configButtonResp" class="uiActionWithLabel pull-right" data-placement="bottom" data-toggle="tooltip" title="" data-original-title="Preferences">
        <i class="uiIconSetting uiIconLightGray"></i>
      </div>
      <div class="uiSearchForm uiSearchInput pull-right" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.tip.search}">
        <div onclick="event.cancelBubble=true;">
          <input class="input-with-value input-default span4" id="chat-search" type="text" placeholder="&{exoplatform.chat.search}" data-value="&{exoplatform.chat.search}">
        </div>
          <i class="uiIconClose uiIconLightGray"></i>
      </div>
    </span>
  </div>

  <div class="uiExtraLeftContainer no-user-selection" >
      <div class="bg"></div>
      <div class="uiExtraLeftGlobal">
          <span class="close"><i class="uiIconEcmsRemove uiIconDarkGray"></i> </span>
          <div class="extraLeftTop">
              <span class="avatar-user">
                    <div class="activityAvatar avatarCircle" >
                        <a rel="tooltip" data-placement="bottom" href="<%=portalURI%>/profile/<%=user%>" data-original-title="">
                            <img class="avatar-image" onerror="this.src='/chat/img/user-default.jpg;'" src='/rest/v1/social/users/<%=user%>/avatar' >
                        </a>
                    </div>
                </span>
              <div class="selectUserStatus pull-left">
                  <div class="buttonChangeStatus actionIcon dropdown" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.change.status}"><span class="chat-status-chat chat-status-invisible" style="padding: 0;margin: 0;"></span></div>
                  <ul class="dropdown-menu chat-status-panel">
                      <li class="chat-menu" status="available"><a href="javaScript:void(0)"><i class="chat-status chat-status-available"></i>&{exoplatform.chat.available}</a></li>
                      <li class="chat-menu" status="away"><a href="javaScript:void(0)"><i class="chat-status chat-status-away"></i>&{exoplatform.chat.away}</a></li>
                      <li class="chat-menu" status="donotdisturb"><a href="javaScript:void(0)"><i class="chat-status chat-status-donotdisturb"></i>&{exoplatform.chat.donotdisturb}</a></li>
                      <li class="chat-menu" status="invisible"><a href="javaScript:void(0)"><i class="chat-status chat-status-invisible"></i>&{exoplatform.chat.invisible}</a></li>
                  </ul>
              </div>

              <label class="pull-left full_name">
                  <a href='<%=portalURI%>/profile/<%=user%>' class='label-user' target='_blank'><%=(fullname.length()>29)?fullname.substring(0,29)+"...":fullname%></a>
              </label>
              <hr class="clearfix"/>
          </div>
          <div class="extraLeftMedium">
              <div id="configButton" class="uiActionWithLabel ligne" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.settings.button.tip}">
                  <i class="uiIconSetting uiIconLightGray" style="margin-right: 10px;"></i> &{exoplatform.chat.settings.button.tip}
              </div>
              <div id="tribeButton" class="uiActionWithLabel ligne" data-placement="home" data-toggle="tooltip" title="&{exoplatform.chat.settings.home}">
                  <a href="/" ><i class="uiIconHomeInfo uiIconLightGray" style="margin-right: 10px;"></i> &{exoplatform.chat.home}</a>
              </div>

          </div>
      </div>
  </div>
  <div class="uiLeftContainerArea no-user-selection" style="padding: 15px 15px 0 0;">
    <div id="chat-users" class=" uiAccordion">
      <span>&nbsp;</span>
    </div>
  </div>

<div class="uiGlobalRoomsContainer">
  <div class="uiRoomUsersContainerArea">
    <div id="room-users-collapse-bar">
      <i class="uiIconArrowDefault"></i>
    </div>
    <div class="uiBox" id="room-users">
      <div class="title no-user-selection" id="room-users-header">
        <div id="closeListPart" class="displayResponsive"> <i class="uiIconEcmsGoBack"></i></div>
        <span id="room-users-title" class="title-text room-users-title">&{exoplatform.chat.room.people} <span id="room-users-title-nb-users"></span></span>

        <div id="room-users-button" class="team-button">
	        <ul class="nav pull-right uiDropdownWithIcon">
            <li><div id='room-users-btn-offline' class='actionIcon btn-offline' data-type='people' href='javaScript:void(0)' data-toggle='tooltip' data-placement='top' title='&{exoplatform.chat.show.users}' data-title-active='&{exoplatform.chat.hide.users}' data-title-inactive='&{exoplatform.chat.show.users}'><i class='uiIconChatMember uiIconChatLightGray'></i></div></li>
          </ul>
        </div>
      </div>
      <div id="room-users-list"></div>
    </div>
  </div>

  <div class="uiRightContainerArea" style="padding: 15px 0 0 0; float:initial;">
    <div class="uiBox">

      <div class="title room-detail no-user-selection" id="room-detail">

            <div id="back" class="displayResponsive"> <i class="uiIconEcmsGoBack"></i></div>
        <span id="chat-room-detail-avatar" class="room-detail-avatar" style="display:none">
          <div class="activityAvatar avatarCircle">
            <a rel="tooltip" data-placement="bottom" class="target-avatar-link" href="" data-original-title="">
              <img class="avatar-image target-avatar-image" src='/chat/img/user-default.jpg;' >

            </a>
          </div>
        <div class="room-user-status pull-right" id="userRoomStatus">    <i class="user-offline"></i>  </div>
        </span>



        <span id="chat-video-button" class="room-detail-button" style="display:none">
            <a type="button" class="btn btn-primary pull-right btn-weemo disabled" data-toggle="tooltip" title="&{exoplatform.chat.video.call}">
            <i class="uiIconChatVideo  uiIconChatWhite"></i> &{exoplatform.chat.button.call}</a>
            <a type="button" class="btn btn-primary pull-right btn-weemo-conf disabled" data-toggle="tooltip" title="&{exoplatform.chat.video.join}">
            <i class="uiIconChatVideo  uiIconChatWhite"></i> &{exoplatform.chat.button.join}</a>
        </span>

        <div id="chat-team-button-dropdown" class="btn-group pull-right chat-team-button-dropdown">
          <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="caret" style="margin-right:4px;"></i></a>
          <ul class="dropdown-menu">

            <li>
              <a href="#" id="chat-record-button" class="msButtonRecord auto-wrap" data-placement="left" disabled>
                <i class="uiIconChatRecordStart uiIconChatLightGray"></i>
                <span>&{exoplatform.chat.meeting.start}</span>
              </a>
            </li>
            
            <li><a href="#" id="team-add-to-favorites-button" class="auto-wrap"><i class="uiIconChatFavorite pull-left user-status"></i>&nbsp;&{exoplatform.chat.add.favorites}</a></li>
            <li><a href="#" id="team-remove-from-favorites-button" class="auto-wrap"><i class="uiIconChatFavorite pull-left user-favorite"></i>&nbsp;&{exoplatform.chat.remove.favorites}</a></li>
            <li><a href="#" id="team-notification-button" class="auto-wrap"><i class="uiIconPLFNotifications"></i>&nbsp;&{exoplatform.stats.notifications}</a></li>
            <li class="only-admin"><a href="#" id="team-edit-button" class="auto-wrap"><i class="uiIconEdit uiIconLightGray"></i><span href="javaScript:void(0)" data-toggle="tooltip">&nbsp;&{exoplatform.chat.team.edit}</span></a></li>
            <li class="only-admin"><a href="#" id="team-delete-button" class="auto-wrap"><i class="uiIconDelete uiIconChatLightGray"></i><span href="javaScript:void(0)" data-toggle="tooltip">&nbsp;&{exoplatform.chat.team.delete}</span></a></li>
            <li class="participantsList">
              <a href="#" class="auto-wrap" data-placement="left" disabled>
                <i class="uiIconViewList uiIconChatLightGray"></i>
                <span>&{exoplatform.chat.participants}</span>
              </a>
            </li>
          </ul>
        </div>

          <!-- display in responsive -->
          <div id="searchButtonResp" class="displayResponsive uiActionWithLabel pull-right" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.settings.button.tip}">
              <i class="uiIconSearch uiIconLightGray"></i>
          </div>

          <div class="displayResponsive uiSearchForm uiSearchInput pull-right" data-placement="bottom" data-toggle="tooltip" title="&{exoplatform.chat.tip.search}">
              <div onclick="event.cancelBubble=true;">
                  <input class="input-with-value input-default span4" id="chat-searchResp" type="text" placeholder="&{exoplatform.chat.search}" data-value="&{exoplatform.chat.search}">
              </div>
              <i class="uiIconClose uiIconLightGray"></i>
          </div>


        <a id="chat-room-detail-fullname" class="title-text target-user-fullname room-detail-fullname" href="javascript:void(0)"></a>

      </div>

      <div id="chats">

      	<div class="noContent"><span class="text">&{exoplatform.chat.no.conversation}</span></div>

      </div>

      <div class="chat-message footer">

        <span class="pull-left" style="padding: 4px 0 0 18px;">
          <span id="chat-msg-smiley-button" class="actionIcon actionIconSmile disabled" data-original-title="&{exoplatform.chat.emoticons}" data-placement="right"><span class="uiIconChatSmile uiIconChatLightGray msg-button msg-emoticons no-user-selection" >&nbsp;</span></span><br>

          <span class="msg-emoticons-panel popover top no-user-selection" style="display:none">
          <div class="arrow"></div>
            <span class="emoticon emoticon-smile-white emoticon-btn" data=":)">&nbsp;</span>
            <span class="emoticon emoticon-sad-white emoticon-btn" data=":(">&nbsp;</span>
            <span class="emoticon emoticon-big-smile-white emoticon-btn" data=":D">&nbsp;</span>
            <span class="emoticon emoticon-eye-blink-white emoticon-btn" data=";)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-surprise-white emoticon-btn" data=":O">&nbsp;</span>
            <span class="emoticon emoticon-no-voice-white emoticon-btn" data=":|">&nbsp;</span>
            <span class="emoticon emoticon-tongue-white emoticon-btn" data=":p">&nbsp;</span>
            <span class="emoticon emoticon-bow-white emoticon-btn" data="(bow)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-yes-white emoticon-btn" data="(y)">&nbsp;</span>
            <span class="emoticon emoticon-no-white emoticon-btn" data="(n)">&nbsp;</span>
            <span class="emoticon emoticon-star-white emoticon-btn" data="(star)">&nbsp;</span>
            <span class="emoticon emoticon-beer-white emoticon-btn" data="(beer)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-bug-white emoticon-btn" data="(bug)">&nbsp;</span>
            <span class="emoticon emoticon-cake-white emoticon-btn" data="(cake)">&nbsp;</span>
            <span class="emoticon emoticon-cash-white emoticon-btn" data="(cash)">&nbsp;</span>
            <span class="emoticon emoticon-coffee-white emoticon-btn" data="(coffee)">&nbsp;</span>
          </span>
        </span>

        <div class="meeting-actions pull-right dropup  no-user-selection">
          <div class="popover top meeting-action-popup">
            <div class="arrow">
            </div>
            <div class="popover-inner">

              <div class="popover-content meeting-action-content">
                <div class="meeting-action-panel meeting-action-link-panel" data-height="161" data-title="&{exoplatform.chat.link}">
                  <strong class="actionTitle">&{exoplatform.chat.share.link}</strong>
                  <input type="text" class="input-with-value" id="share-link-text" placeholder="E.g: http://www.exoplatform.com" data-value="E.g: http://www.exoplatform.com">
                  <div class="uiActionBorder" >
                  	<a href="#" type="button" class="btn btn-primary share-link-button">&{exoplatform.chat.share}</a>
                  	<a href="#" type="button" class="btn btnClosePopup">&{exoplatform.chat.cancel}</a>
                  </div>
                </div>
                <div class="meeting-action-panel meeting-action-file-panel" data-height="195" data-title="&{exoplatform.chat.file}">
                  <strong class="actionTitle">&{exoplatform.chat.upload.file}</strong>
                  <span id="dropzone-container">
                  </span>
                  <form action="" id="chat-file-form" method="post" enctype="multipart/form-data" accept-charset="utf-8">
                    <input type="hidden" name="room" value="---" id="chat-file-room" />
                    <input type="hidden" name="targetUser" value="---" id="chat-file-target-user" />
                    <input type="hidden" name="targetFullname" value="---" id="chat-file-target-fullname" />
                    <input type="hidden" name="encodedFileName" value="---" id="chat-encoded-file-name" />
                    <div class="uiActionBorder">
	                    <a href="#" class="btn btn-primary chat-file-upload" type="button">
	                      <span>&{exoplatform.chat.file.manually}</span>
	                      <input type="file" name="userfile" id="chat-file-file" />
	                    </a>
	                    <a href="#" type="button" class="btn btnClosePopup">&{exoplatform.chat.cancel}</a>
	                    <input type="submit" value="&{exoplatform.chat.file.select}" id="chat-file-submit" style="display:none" />
	                </div>
                  </form>
                </div>
                <div class="meeting-action-panel meeting-action-question-panel" data-height="157" data-title="&{exoplatform.chat.question}">
                  <strong class="actionTitle">&{exoplatform.chat.panel.question.header}</strong>
                  <input type="text" class="input-with-value" id="question-text" data-value="&{exoplatform.chat.question.what}" placeholder="&{exoplatform.chat.question.what}">
                  <div class="uiActionBorder">
                  	<a href="#" type="button" class="btn btn-primary question-button">&{exoplatform.chat.ask}</a>
                    <a href="#" type="button" class="btn btnClosePopup">&{exoplatform.chat.cancel}</a>
                  </div>
                </div>
                <div class="meeting-action-panel meeting-action-hand-panel" data-height="157" data-title="&{exoplatform.chat.raise.hand}">
                  <strong class="actionTitle">&{exoplatform.chat.raise.hand}</strong>
                  <input type="text" class="input-with-value" id="raise-hand-comment-text" data-value="&{exoplatform.chat.optional.comment}" placeholder="&{exoplatform.chat.optional.comment}">
                  <div class="uiActionBorder" >
                  	<a href="#" type="button" class="btn btn-primary raise-hand-button">&{exoplatform.chat.raise.your}</a>
                  	<a href="#" type="button" class="btn btnClosePopup">&{exoplatform.chat.cancel}</a>
                  </div>
                </div>
                <%=extPopup%>
                <div class="meeting-action-panel meeting-action-event-panel" data-height="279" data-title="&{exoplatform.chat.add.event}">
                  <strong class="actionTitle">&{exoplatform.chat.add.event}</strong>
                  <input type="text" class="input-with-value" data-value="&{exoplatform.chat.event.title}" placeholder="&{exoplatform.chat.event.title}" id="event-add-summary">
                  <span class="action-label" style="display: inline-block;width: 40px;">&{exoplatform.chat.from}: </span>
                  <input type="text" data-value="mm/dd/yyyy" placeholder="mm/dd/yyyy" data-date="<%=today%>" style="width:88px;" id="event-add-start-date">
                  <span class="uiSelectbox">
                    <select class="selectbox" id="event-add-start-time">
                      <option value="all-day">&{exoplatform.chat.all.day}</option>
                    </select>
                  </span>
                  <br>
                  <span class="action-label" style="display: inline-block;width: 40px;">&{exoplatform.chat.to}: </span>
                  <input type="text" data-value="mm/dd/yyyy" placeholder="mm/dd/yyyy" data-date="<%=today%>" style="width:88px;" id="event-add-end-date">
                  <span class="uiSelectbox">
                    <select class="selectbox" id="event-add-end-time">
                      <option value="all-day">&{exoplatform.chat.all.day}</option>
                    </select>
                  </span>
                  <input type="text" class="input-with-value input-default" data-value="&{exoplatform.chat.location}" placeholder="&{exoplatform.chat.location}" id="event-add-location">
                  <div class="uiActionBorder" >
                  	<a href="#" type="button" class="btn btn-primary create-event-button">&{exoplatform.chat.post}</a>
                  	<a href="#" type="button" class="btn btnClosePopup">&{exoplatform.chat.cancel}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="chat-msg-meeting-actions" class="actionIcon meeting-action-toggle disabled" data-toggle="dropdown"><span data-placement="left" data-original-title="&{exoplatform.chat.actions.show}"><i class="uiIconChatAction uiIconChatLightGray"></i></span></div>
            <div id="submit" class="btn"><i class="uiIconShare"></i></div>
            <ul class="dropdown-menu pull-right">
            <li class="meeting-action-link meeting-action-event" data-toggle="meeting-action-event-panel"><a href="#"><i class="uiIconChatCreateEvent uiIconChatLightGray"></i> &{exoplatform.chat.add.event}</a></li>
            <%=extMenu %>
            <li class="meeting-action-link" data-toggle="meeting-action-link-panel"><a href="#"><i class="uiIconChatLink uiIconChatLightGray"></i> &{exoplatform.chat.share.link}</a></li>
            <li class="meeting-action-link" data-toggle="meeting-action-file-panel" id="meeting-action-upload-link"><a href="#"><i class="uiIconChatUpload uiIconChatLightGray"></i> &{exoplatform.chat.upload.file}</a></li>

            <li class="meeting-action-link" data-toggle="meeting-action-question-panel"><a href="#"><i class="uiIconChatQuestion uiIconChatLightGray"></i> &{exoplatform.chat.ask.question}</a></li>
            <li class="meeting-action-link" data-toggle="meeting-action-hand-panel"><a href="#"><i class="uiIconChatRaiseHand uiIconChatLightGray"></i> &{exoplatform.chat.raise.hand}</a></li>
          </ul>
        </div>

        <div style="display: block;margin-left: 45px;margin-right: 54px;">
          <textarea type="text" name="text" id="msg" autocomplete="off" disabled></textarea>
        </div>

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

   <div id="global-config-template" style="display:none;">
    <div class="row">
    <div class="span6">
    <h4 class="global offset1" style="position: relative; left:0%;">&{exoplatform.chat.desktopNotif.global.notifications}</h4>
        <div id="id2" class="offset2 notif-trigger" style="position: relative; left: -6%;">
            <input notif-trigger="notify-even-not-distrub" type="checkbox" class="switchBtnLabelOn yesno staus-true" />
    <span class="channel-label"><b class="global">&{exoplatform.chat.desktopNotif.global.donotdist}</b></span>
    <span class="channel-label clearfix" style="position: relative; left: 18%;"><i class="global"  >&{exoplatform.chat.desktopNotif.global.donotdist.description}</i></span>
    </div>
    </div>
    <div class="span6">
    <h4 class="global offset2" style="position: relative; left:-17%;">&{exoplatform.chat.desktopNotif.global.notifyme}</h4>

        <div class="offset2 notif-manner" style="position: relative; left: -6%;">
            <input notif-type="desktop" type="checkbox" class="switchBtnLabelOn yesno staus-true" />
    <span class="channel-label"><b class="global">
            &{exoplatform.chat.desktopNotif.global.desktop}</b></span>
    <span class="channel-label clearfix" style="position: relative; left: 18%;"><i class="global">&{exoplatform.chat.desktopNotif.global.desktop.description}</i></span>
    </div>
        <div class="offset2 notif-manner" style="position: relative; left: -6%;">
            <input notif-type="on-site" type="checkbox" class="switchBtnLabelOn yesno staus-true" />
    <span class="channel-label"><b class="global">&{exoplatform.chat.desktopNotif.global.onsite}</b></span>
    <span class="channel-label clearfix" style="position: relative; left: 18%;"><i class="global">&{exoplatform.chat.desktopNotif.global.onsite.description}</i></span>
    </div>
        <div class="offset2 notif-manner" style="position: relative; left: -6%;">
            <input notif-type="bip" type="checkbox" class="switchBtnLabelOn yesno staus-true" />
    <span class="channel-label"><b class="global">
            &{exoplatform.chat.desktopNotif.global.beep}</b></span>
    <span class="channel-label clearfix" style="position: relative; left: 18%;"><i class="global">&{exoplatform.chat.desktopNotif.global.beep.description}</i></span>
    </div>
    </div>
    </div>
    <div class="row center">
      <button id="close-global-notif-config" class="btn btn-default centered global">&{exoplatform.chat.desktopNotif.close} </button>
    </div>
</div>


    <div id="room-config-template" style="display:none;">
    <div class="row">
    <div class="span8 offset1 chat-room-config">

    <input type="radio" room-notif-trigger="normal"  name="optionsRadios" id="optionsRadios1" value="option1" checked />
    <span class="label-head"> &{exoplatform.chat.desktopNotif.local.normal.label}</span> <br/>
    <span class="label-text local">&{exoplatform.chat.desktopNotif.local.normal}</span><br/>

    <input type="radio" room-notif-trigger="silence"  name="optionsRadios" id="optionsRadios2" value="option2" />
    <span class="label-head"> &{exoplatform.chat.desktopNotif.local.silence.label} </span><br/>
    <span class="label-text local">&{exoplatform.chat.desktopNotif.local.silence}</span><br/>

    <input type="radio" room-notif-trigger="keywords"  name="optionsRadios" id="optionsRadios3" value="option3" />
    <span class="label-head"> &{exoplatform.chat.desktopNotif.local.alerton.label} :</span><br/>

    <input class="radio-input-text" id="room-notif-trigger-when-key-word-value" type="text" placeholder=&{exoplatform.chat.desktopNotif.local.alerton.placeholder} class="radio-input-text" name="keyWord" /><br/>
    <span class="label-text local">&{exoplatform.chat.desktopNotif.local.alerton}</span><br/><br/>
    </div>
</div>
    <div class="row center">
      <button id="close-room-notif-config" class="btn btn-default local">&{exoplatform.chat.desktopNotif.close}
      </button>
    </div>
</div>

<!-- ################################## -->
<!-- ######### TEXT MODAL ############ -->
<!-- ################################## -->
<div class="modal hide text-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>&{exoplatform.chat.text.discussion}</h3>
  </div>
  <div class="modal-body">
    <textarea id="text-modal-area"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary text-modal-close">&{exoplatform.chat.close}</a>
  </div>
</div>
<!-- ################################## -->
<!-- ######### EDIT MODAL ############ -->
<!-- ################################## -->
<div class="uiPopup modal hide edit-modal" style="top:100px;">
  <div class="popupHeader clearfix">
	<a class="uiIconClose pull-right" data-dismiss="modal" aria-hidden="true"></a>
	<span class="PopupTitle popupTitle">&{exoplatform.chat.msg.edit}</span>
  </div>

  <div class="PopupContent popupContent">
    <textarea id="edit-modal-area" data-id="---"></textarea>
    <div class="uiAction uiActionBorder">
    	<a type="button" href="#" class="btn edit-modal-save">&{exoplatform.chat.save}</a>
		<a type="button" href="#" class="btn edit-modal-cancel">&{exoplatform.chat.cancel}</a>
	</div>
  </div>
  <span class="uiIconResize pull-right uiIconLightGray"></span>
</div>
<!-- ################################## -->
<!-- ######### TEAM MODAL ############ -->
<!-- ################################## -->
<div id="team-modal-form" class="uiPopup modal hide team-modal">
  <div class="popupHeader clearfix">
    <a class="uiIconClose pull-right" data-dismiss="modal" aria-hidden="true"></a>
    <span class="PopupTitle popupTitle"></span>
  </div>

  <div class="PopupContent popupContent">
    <div class="resizable">
      <div class="modal-body">
        <label>&{exoplatform.chat.team.name}</label>
        <input type="text" id="team-modal-name" data-id="---" value="" />
        <label>&{exoplatform.chat.team.people}</label>
        <div class="team-users-list"></div>
        <div class="uiSearchForm uiSearchInput team-users-search">
          <div onclick="event.cancelBubble=true;">
            <input id="team-add-user" type="text" >
          </div>
        </div>
        <div class="team-users-results uiAutoComplete" style="display:none;"></div>
        <span class="team-add-user-label">&{exoplatform.chat.team.help}</span>
      </div>
    </div>
    <div class="uiAction uiActionBorder">
      <a href="#" class="btn btn-primary team-modal-save">&{exoplatform.chat.save}</a>
      <a href="#" class="btn team-modal-cancel">&{exoplatform.chat.cancel}</a>
    </div>
  </div>
  <span class="uiIconResize pull-right uiIconLightGray"></span>
</div>
<!-- ################################## -->
<!-- ### TEAM SETTINGS VIEW MODAL ##### -->
<!-- ################################## -->
<div id="team-settings-modal-view" class="uiPopup hide team-settings-modal">
  <div class="popupHeader clearfix">
    <a class="uiIconClose pull-right" data-dismiss="modal" aria-hidden="true"></a>
    <span class="PopupTitle popupTitle">&{exoplatform.chat.team.settings.title}</span>
  </div>
  <div class="PopupContent popupContent">
    <div class="resizable">
      <div class="modal-body">
        <label>&{exoplatform.chat.team.settings.owner}</label>
        <div id="team-settings-user-owner"></div>
        <label>&{exoplatform.chat.team.settings.members}</label>
        <div id="team-settings-users-list"></div>
      </div>
    </div>
    <div class="uiAction uiActionBorder">
      <a href="#" class="btn team-settings-modal-close">&{exoplatform.chat.close}</a>
    </div>
  </div>
  <span class="uiIconResize pull-right uiIconLightGray"></span>
</div>

<!-- ################################## -->
<!-- ######### TEAM DELETE MODAL ###### -->
<!-- ################################## -->
<div id="team-delete-window" class="uiPopup hide team-delete-modal">
  <div class="popupHeader clearfix">
    <a class="uiIconClose pull-right" data-dismiss="modal" aria-hidden="true"></a>
    <span id="team-delete-window-label" class="PopupTitle popupTitle">&{exoplatform.chat.team.delete.title}</span>
  </div>

  <div class="PopupContent popupContent">
    <div class="modal-body">
      <p><span id="team-delete-window-chat-name" class="confirmationIcon">&{exoplatform.chat.team.delete.message}</span></p>
    </div>
    <div class="uiAction uiActionBorder">
      <a id="team-delete-button-ok" href="#" class="btn btn-primary">&{exoplatform.chat.team.delete.ok}</a>
      <a id="team-delete-button-cancel" href="#" class="btn">&{exoplatform.chat.team.delete.ko}</a>
    </div>
  </div>
</div>

<!-- ################################## -->
<!-- ######### SESSION TIMEOUT MODAL ###### -->
<!-- ################################## -->
<div id="session-timeout-window" class="uiPopup hide">
    <div class="popupHeader clearfix">
        <span class="PopupTitle popupTitle">&{exoplatform.chat.timeout.title}</span>
    </div>

    <div class="PopupContent popupContent">
        <div class="modal-body">
            <p><span class="confirmationIcon">&{exoplatform.chat.timeout.description}</span></p>
            <p class="text-center"><a href="" class="btn btn-primary">&{exoplatform.chat.timeout.login}</a></p>
        </div>
    </div>
</div>

<!-- ################################## -->
<!-- ######### MIGRATION MODAL ############ -->
<!-- ################################## -->
<div class="modal hide help-modal" style="display:none;">
  <div class="modal-header">
    <h3>&{exoplatform.chat.howto1}</h3>
  </div>
  <div class="modal-body">
    &{exoplatform.chat.howto2}
    <ul>
      <li><b>/me [&{exoplatform.chat.howto3}]</b>: &{exoplatform.chat.howto4} ;</li>
      <li><b>/call</b>: &{exoplatform.chat.howto5} ;</li>
      <li><b>/join</b>: &{exoplatform.chat.howto6} ;</li>
      <li><b>/terminate</b>: &{exoplatform.chat.howto7} ;</li>
      <li><b>/export</b>: &{exoplatform.chat.howto8} ;</li>
      <li><b>/help</b>: &{exoplatform.chat.howto9} ;</li>
    </ul>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn help-modal-cancel" onclick="javascript:jqchat('.help-modal').hide();">&{exoplatform.chat.close}</button>
  </div>
</div>
