extends layout

block content
  .row
    .col-sm-9: .panel.panel-default
      .panel-heading Lounge
      ul#message-list.list-group

    .col-sm-3: .panel.panel-default
      .panel-heading Users
      ul#user-list.list-group
        li.list-group-item George
        li.list-group-item John
        li.list-group-item Paul
        li.list-group-item Ringo

  .input-group
    input#message-field.form-control(type='text', autofocus)
    span.input-group-btn
      button#message-send-button.btn.btn-primary(type='button') Send

  script#message-template(type="text/template").
    <li class="list-group-item">
      <div class="media">
        <div class="pull-left">
          <img class="media-object" src="http://placekitten.com/80/80" alt="avatar">
        </div>

        <div class="media-body">
          <h4 class="media-heading"><%= name || 'Guest' %></h4>

          <%= _.escape(message) %>
        </div>
      </div>
    </li>

extends layout

block content
  .row
    .col-sm-9: .panel.panel-default
      .panel-heading: strong Lounge
      ul#message-list.list-group

    .col-sm-3: .panel.panel-default
      .panel-heading: strong Users
      ul#user-list.list-group
        li.list-group-item George
        li.list-group-item John
        li.list-group-item Paul
        li.list-group-item Ringo

  .input-group
    input#message-field.form-control(type='text', autofocus)
    span.input-group-btn
      button#message-send-button.btn.btn-primary(type='button') Send

  script#message-template(type="text/template").
    <li class="list-group-item">
      <div class="media">
        <div class="pull-left">
          <img class="media-object" src="http://placekitten.com/80/80" alt="avatar">
        </div>

        <div class="media-body">
          <h4 class="media-heading"><%= name || 'Guest' %></h4>

          <%= _.escape(message) %>
        </div>
      </div>
    </li>

Use strong tags for panel headings
Use strong tags for panel headings
