- 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
        %h1.group-header.active Chat group
        %ul.active-group.border.no-left-border.left-border#js-active-friends
          %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" }