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