Noosfero/noosfero

    <%= javascript_include_tag 'vendor/strophejs-1.1.3/strophe.min', 'vendor/jquery.emoticon', 'designs/icons/pidgin/emoticons.js', 'vendor/ba-linkify', 'vendor/jquery.ba-hashchange', 'vendor/jquery.sound', 'chat', 'vendor/perfect-scrollbar.min.js', 'vendor/perfect-scrollbar.with-mousewheel.min.js', 'vendor/jquery.timeago.js' %>
    <%= stylesheet_link_tag 'vendor/perfect-scrollbar.min.css' %>

    <% extend ChatHelper %>

    <script type='text/javascript'>
      var $own_name = '<%= user.name %>';
      var $muc_domain = '<%= "conference.#{environment.default_hostname}" %>';
      var $bosh_service = '//<%= environment.default_hostname %>/http-bind';
      var $user_unavailable_error = '<%= _("The user is not online now. He/She will receive these messages as soon as he/she gets online.") %>';
      var $update_presence_status_every = <%= User.expires_chat_status_every.minutes %>;
      var $presence = '<%= current_user.last_chat_status %>';
    </script>

  <div id="chat-label">
    <span id="unread-messages"></span>
    <span class="right-arrow">&#9654;</span>
    <span class="title"><%= _('Chat') %></span>
  </div>

  <div id='chat'>
    <div id='buddy-list'>
      <div class='toolbar'>
        <div id='user-status'>
          <%= user_status_menu('icon-menu-offline', _('Offline')) %>
        </div>
        <div class='dialog-error' style='display: none'></div>
      </div>

      <div class='body'>
        <%= text_field_tag(:query, '', :placeholder => _('Search...'), :class => 'search') %>

        <div class='buddies'>
          <ul class='online'></ul>
          <ul class='offline'></ul>
        </div>
      </div>
    </div>

    <div id='chat-window'>
      <div id='conversations'></div>
    </div>

    <div id="chat-templates" style="display: none;">

      <div class="conversation">
        <div class="conversation-header">
          <span class="chat-target">
        <img class="avatar">
            <span class="other-name"></span>
          </span>
        </div>
        <div class='history'></div>
        <div class='input-div'>
            <div class='icon-chat'></div>
            <textarea class='input'></textarea>
        </div>
      </div>

      <a class='join room-action'><%= _('Join room') %></a>
      <a class='leave room-action' style="display: none"><%= _('Leave room') %></a>

      <div class="buddy-item">
        <li class='%{presence_status}'>
          <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
            <span class="unread-messages"></span>
            %{avatar}
            <span class="name">%{name}</span>
          </a>
        </li>
      </div>

      <div class="occupant-list-template">
        <div class="occupants room-action">
          <a href="#" class="up"><%= _('Online') %>&nbsp;(<span class="occupants-online">0</span>)</a>
          <ul class='occupant-list'></ul>
        </div>
      </div>

      <div class="occupant-item">
        <li class='%{presence_status}'>
          <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
            <span class="unread-messages"></span>
            %{avatar}
            <span class="name">%{name}</span>
          </a>
        </li>
      </div>

      <div class="message">
        <div data-who="%{who}" class="message %{who}">
          <div class="content">
            <span class="time" title="%{time}"></span>
            <div class="author">
              %{avatar}
            </div>
            <p>%{message}</p>
          </div>
        </div>
      </div>
    </div>
  </div>