- content_for :title, t("chat.title")
 - content_for :javascript, javascript_include_tag("application")
 
 .container

   .leftside.left
     .roster.border.no-top-border.top-border.height-setter

       .user

         .avatar.bigger

           %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
         %h1 Cinan Rakosnik
         %h2 frontend developer

         %h3
           %span.status.online
           %a{ href: "#"}
             available
             %span.icon-arrow-down.drop-down

       .friends
         %h1.group-header.active Chat group

         %ul.active-group.border.no-left-border.left-border
           %li.clear.user
             .avatar
               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
             %h1
               Adam Wolsky
               %span.status.online
             %h2 co-founder
             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
           %li.clear.user
             .avatar
               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
             %h1
               John Savage
               %span.status.away
             %h2 web & ui designer
             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
               %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite

         %h1.group-header Friends
         %ul

           %li.clear.user{ style: "padding-right: 0"}
             .avatar
               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
             %h1
               Ashley Bond
               %span.status.offline
             %h2 sexretary
             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
               -#%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
               -#  %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} chat
               %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 13px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite
           %li.clear.user
             .avatar
               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
             %h1
               Bob Awesome
               %span.status.dnd
             %h2 sales manager
             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
               %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
           %li.clear.user
             .avatar
               %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
             %h1
               Bob Awesome
               %span.status.dnd
             %h2 sales manager
             %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
               %span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
                 %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} chat

 
       .toolbox

         %input{type: "search", placeholder: "Search contact"}
         %a{ href: "#"}
           %span.icon-cog
   .chatting-window.left.rightside
     .tabbar
       %a{ href: "#", class: "tab active top-border"}
         Adam and John
         %span.right.icon.icon-x
       %a{ href: "#", class: "tab"}
          
         %span.right.icon.icon-x
       %a{ href: "#", class: "tab"}
          
         %span.right.icon.icon-x
     .conversation.clear.border
       .messages
         %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
         %input{ type: "text", placeholder: "Type your message here" }
         %input{ type: "submit", value: "Send" }