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