{{#chat/chat-room-manager
  isShowingCreateRoom=showCreateRoom
  isShowingInviteUser=showInviteUser
  room=currentRoom
  isShowingList=showList
}}
  <div class='chat-header'>
    {{#if flashDisabled}}
      <a class='button button--icon-only chat-header__button chat-header__button--left disabled'>
        {{svg-icon path='svg/roomlist'}}
      </a>
    {{else}}
      <a title="{{i18n 'View All Rooms'}}" {{action "toggleMode" }} class='button button--icon-only chat-header__button chat-header__button--left tooltip'>
        {{svg-icon path='svg/roomlist'}}
        {{#if notificationsCount}}{{#unless disableGroupChat}}<span class='notifications'>{{notificationsCount}}</span>{{/unless}}{{/if}}
      </a>
    {{/if}}
    <p class='room-title'>{{currentRoom.name}}</p>
    {{#if currentRoom.canInvite}}
      <a title="{{i18n 'Invite a User'}}" {{action "toggleInviteUser" }} class='button button--icon-only invite chat-header__button chat-header__button--right tooltip'>
        {{svg-icon path='svg/adduser'}}
      </a>
    {{/if}}
  </div>
  {{chat/invitation-notification invitation=invitation action="invitationClick"}}
  {{#if showInviteUser}}
    <div class='chat-invite-user top-dropdown'>
      <div class='input-contain'>
        {{input value=inviteUserName placeholder=(i18n 'Enter User Name') enter='inviteUser' class='text' disabled=inviteUserInProgress}}
      </div>
      <button {{action "inviteUser" }} class='button float-left'>{{i18n "Invite"}}</button>
      {{#if inviteUserFailureMessage}}
        <p class='error-message float-left'>{{inviteUserFailureMessage}}</p>
      {{/if}}
    </div>
  {{/if}}
  <div class="chat-room-list chat-menu {{if showCreateRoom 'creating'}}">
    <div class='all-rooms-header'>
      <p class='float-left'>{{i18n 'All Chat Rooms'}}</p>
      {{#unless disableGroupChat}}
        {{#tipsy-wrapper gravity="n" ~}}
          <a title="{{i18n 'Create a Room'}}" class="button button--icon-only float-right create {{if showCreateRoom 'open'}} tooltip" {{action "toggleCreateRoom" }}>
            {{svg-icon path='svg/plus'}}
          </a>
        {{~/tipsy-wrapper}}
      {{/unless}}
    </div>
    {{#if showCreateRoom}}
      <div class='chat-create-room'>
        <div class='input-contain'>
          {{input value=createRoomName placeholder='Room Name' enter='createRoom' class='text'}}
          <div class='public-invites-container'>
            {{input type='checkbox' class="js-public-invites-checkbox public-invites" name="public-invites" checked=createRoomPublic}}
            <label for='public-invites'>{{i18n "Allow anyone to invite other Twitch users"}}</label>
          </div>
        </div>
        <button {{action "createRoom" }} class='button float-left'>{{i18n "Create"}}</button>
        {{#if createRoomFailureMessage}}<p class='error-message float-left'>{{createRoomFailureMessage}}</p>{{/if}}
      </div>
    {{/if}}
    <div class="js-rooms scroll chat-rooms {{if showCreateRoom 'hidden'}}">
      <div class='tse-scroll-content'>
        <div class='tse-content'>
          {{#if currentChannelRoom.name}}
            <div class='list-header first'>
              <p>{{i18n "Channel Chat"}}</p>
            </div>
            {{#if currentChannelRoom.name}}
              <div {{action "roomClick" currentChannelRoom}} class='room'>
                <p class='room-title'>{{currentChannelRoom.name}}</p>
                {{chat/unread-messages count=currentChannelRoom.unreadCount}}
              </div>
            {{/if}}
          {{/if}}
          <div class='list-header'>{{i18n 'Group Chats'}}</div>
          <ul class='room-list'>
            {{#if disableGroupChat}}
              <p class='no-content'>{{i18n "Group chats are currently unavailable due to maintenance."}}</p>
            {{/if}}
            {{#unless disableGroupChat}}
              {{#each connectedPrivateGroupRooms as |room|}}
                <li {{action "roomClick" room}} class='room removable'>
                  <p class='room-title'>{{room.name}}</p>
                  <a {{action "leaveGroupRoom" room bubbles=false}} class='leave-chat'>
                    {{partial 'svg/close-small'}}
                  </a>
                  {{chat/unread-messages count=room.unreadCount}}
                </li>
              {{/each}}
              {{#unless connectedPrivateGroupRooms}}
                <p class='no-content'>
                  {{i18n 'No group chats.'}}
                </p>
              {{/unless}}
            {{/unless}}
          </ul>
          {{#unless disableGroupChat}}
            {{#if isLoggedIn}}
              <div class='list-header'>{{i18n 'Pending Invitations'}}</div>
              <ul class='room-list last'>
                {{#each invitedPrivateGroupRooms as |room|}}
                  <li>
                    <a {{action "acceptInvitation" room bubbles=false}} class='room invitation'>
                      <p class='room-title'>{{room.name}}</p>
                      <span {{action "rejectInvitation" room bubbles=false}} class='leave-chat'>
                        {{partial 'svg/close-small'}}
                      </span>
                    </a>
                    {{#if room.inviter}}
                      <p class='inviter-owner'>
                        {{i18n 'invited by'}}
                        {{room.inviter}}
                        <span title="{{i18n 'Ignore all chat messages and room invitations from this user'}}" {{action "blockUserAndRejectRoom" room.inviter bubbles=false}} class='block tooltip'></span>
                      </p>
                    {{/if}}
                  </li>
                {{/each}}
                {{#unless invitedPrivateGroupRooms}}
                  <p class='no-content'>{{i18n 'No pending invitations.'}}</p>
                {{/unless}}
              </ul>
            {{/if}}
          {{/unless}}
          {{#unless isLoggedIn}}
            <div class='no-login-contain'>
              <h3>{{i18n "You're not logged in!"}}</h3>
              <p>{{i18n "If you don't have an account, go ahead and sign up. It takes like two seconds and it's totally worth it."}}</p>
              <ul>
                <li>{{i18n 'Follow channels you enjoy watching'}}</li>
                <li>{{i18n 'Get notifications when they go live'}}</li>
                <li>{{i18n 'Chat with your fellow viewers'}}</li>
                <li>{{i18n 'Create and join group chats'}}</li>
                <li>{{i18n 'Start your own broadcast'}}</li>
              </ul>
              <a {{action "handleLoginButtonClick" }} class='qa-login-button button' href='/login'>{{t 'general.account.logIn'}}</a>
              <a {{action "handleSignupButtonClick" }} class='button' href='/login'>{{t 'general.account.signUp'}}</a>
            </div>
          {{/unless}}
        </div>
      </div>
    </div>
  </div>
  <div class="chat-room {{if currentRoom '' 'hidden'}}">
    {{chat/chat-room
      room=currentRoom
      isFlashDisabled=flashDisabled
      hideChat=(action 'hideChat')
      popoutChat=(action 'popout')
    }}
  </div>
  <div class="js-chat-hidden-overlay chat-hidden-overlay {{unless isChatHidden 'hidden'}}">
    <div class='popped-out-text'>
      <p>{{i18n 'Chat is hidden.'}}</p>
      <a {{action "show" }} class='button' href='#'>{{i18n "Show Chat"}}</a>
    </div>
  </div>
{{/chat/chat-room-manager}}
