- 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}";

- if flash[:notice]
  %div.alert.alert-notice
    = flash[:notice]

.container
  .leftside.left
    .roster.border.no-top-border.top-border#height-setter-1
      .my-info#js-me
      .friends
        #js-active-friends
        -#%h1.group-header.active Chat group
        -#%ul.active-group
        -#  %li.clear.user
        -#    .avatar
        -#      %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
        -#    %h1
        -#      Adam Wolsky
        -#      %span.status.online.icon-record
        -#    %h2 co-founder
        -#    %span.action
        -#      %span.icon-x-full
        -#        %span kick
        -#  %li.clear.user
        -#    .avatar
        -#      %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
        -#    %h1
        -#      John Savage
        -#      %span.status.away.icon-record
        -#    %h2 web & ui designer
        -#    %span.action
        -#      %span.icon-x-full
        -#        %span kick
        -#      %span.icon-bubbles
        -#        %span invite
        #js-inactive-friends
      .toolbox
        %input{type: "search", placeholder: "Search contact"}
        %a{ href: "#"}
          %span.icon-cog
  .chatting-window.left.rightside
    .tabbar#tabbar
      #js-tabbar
    .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
          .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...
          -#%hr
          %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...

        .event
          Monday 13.2.2013

        .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" }