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

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

.container
  .leftside.left
    .roster.border.no-top-border.top-border#height-setter-1
      .user
        .avatar.bigger
          %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
        %h1 Cinan Rakosnik
        %h2 frontend developer
        %h3
          %span.status.online.icon-record
          %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.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
        %h1.group-header Friends
        %ul
          %li.clear.user
            .avatar
              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
            %h1
              Ashley Bond
              %span.status.offline.icon-record
            %h2 sexretary
            %span.action
              %span.icon-bubbles
                %span invite
          %li.clear.user
            .avatar
              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
            %h1
              Bob Awesome
              %span.status.dnd.icon-record
            %h2 sales manager
            %span.action
              %span.icon-x-full
                %span kick
          %li.clear.user
            .avatar
              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
            %h1
              Bob Awesome
              %span.status.dnd.icon-record
            %h2 sales manager
            %span.action
              %span.icon-bubble
                %span chat

      .toolbox
        %input{type: "search", placeholder: "Search contact"}
        %a{ href: "#"}
          %span.icon-cog
  .chatting-window.left.rightside
    .tabbar#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#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" }