- content_for :title, t("chat.title")
- content_for :javascript, javascript_include_tag("application")
- content_for :javascript, javascript_include_tag("backbone-ws")
- content_for :javascript do
  :javascript
    I18n.defaultLocale = "#{I18n.default_locale}";
    I18n.locale = "#{I18n.locale}";

%div.chat-alert.alert-notice.no-top-border.top-border#js-popup
  - if flash[:notice]
    %a.close.icon-x{ alt: "#{I18n.t('chat.close')}", href: '#' }
    %h1
      = flash[:notice]

.container
  .leftside.left
    .roster.border.no-top-border.top-border
      .my-info#js-me
      .friends
        #js-active-friends
        .wrap#height-setter-1
          #js-inactive-friends
          .toolbox
            %input#js-search-contacts{type: 'search', placeholder: "#{I18n.t('chat.roster.search')}", name: 'contact'}
            %a{ href: '#'}
              %span.icon-cog
  .chatting-window.left.rightside
    .tabbar#tabbar
      .wrap#js-tabbar
    #conversation-js
      -#.conversation.clear.border
        -#.messages#height-setter-2{style: "overflow: auto;"}
        -#  %a{ href: "#", class: "event" }
        -#    Load older messages
        -#    %span.icon-arrow-up
        -#  .message-box
        -#    .user
        -#      .avatar
        -#        %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
        -#      -#todo: user name missing in design
        -#    .date 3 hours ago
        -#    %p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...
        -#
        -#  .message-box.active
        -#    .user
        -#      .avatar
        -#        %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
        -#      -#todo: user name missing in design
        -#    .date 3 hours ago
        -#    %p Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Lorem ipsum dolor sit amet enim.
        -#
        -#  .event
        -#    Adam left the room | 13:45
        -#
        -#.message-writer#msg-writer
        -#  %input{ type: "text", placeholder: "Type your message here" }
        -#  %input{ type: "submit", value: "Send" }