chat.html

<template name="chat">

  {{> messages}}

  {{#if ready}}
  <div class="bb-chat-callin {{#if solved}}solved{{/if}}">
    {{#if solved}}Solved
    {{else}}
      {{#with object}}
        {{> puzzle_callin_modal}}
        {{> puzzle_summon_modal}}
      {{/with}}
    {{/if}}
  </div>
  {{/if}}
  <div class="navbar navbar-inverse navbar-fixed-bottom bb-chat-footer">
    <div class="navbar-inner">
      {{> messages_input}}
    </div>
  </div>

</template>

<template name="chat_header">
  {{#unless "true"}}
  <form id="joinRoom" class="form-search pull-left">
    <div class="input-prepend">
      <span class='add-on'>Room name:</span>
      <input id="roomName" type="text" class="search-query"
             value="{{room_name}}" />
    </div>
  </form>
  {{/unless}}
  <div class="navbar-text bb-chat-presence">
    <span class="label label-inverse">
    Hunters present ({{whos_here.count}}):
    </span>
    <span class="comma-list">
      {{#each whos_here}}{{> nick_presence }}{{/each}}
    </span>
  </div>
</template>

<template name="messages_input">
      {{#if hasNick}}
      <form id="messageForm" class="navbar-form">
        <textarea id="messageInput" class="input-block-level" rows="1"
               placeholder="Type your message and press enter..."
               autocomplete="off" ></textarea>
      </form>
      {{/if}}
</template>


<template name="messages">
  <div id="messages" class="row-fluid bb-chat-messages">
    {{#if ready}}{{#if prevTimestamp}}
      <p align="center">
        <a href="{{prevTimestamp}}" class="chat-link">See earlier messages</a>
      </p>
    {{else if timestamp}}
      <p align="center">Start of chat log.</p>
    {{/if}}{{/if}}
    {{#each messages}}{{scrollHack}}
      {{#if message.presence}}
<div class="bb-message-presence {{message.presence}}" title={{body}}>
  {{gravatar id=email image="wavatar" size=14 }}{{message.nick}}
</div>
      {{else if message.system}}
<div class="bb-message-system">
   <div class="pull-right timestamp">{{pretty_ts message.timestamp}}</div>
     {{body}}
</div>
      {{else if usefulEnough message}}
        {{# if message.action}}
<div class="bb-message-action" data-nick="{{message.nick}}">
   <div class="pull-right timestamp">{{pretty_ts message.timestamp}}</div>
     <i class="icon-hand-right"></i>
     <span title="{{message.nick}}{{nickLocation message.nick}}" class="{{#if nickNear message.nick}}near{{/if}}">{{nickOrName message.nick}}</span> {{body}}
</div>
        {{else}}
<div class="media{{#if message.to}} bb-message-pm{{/if}}{{#if followup}} bb-message-followup{{/if}}" data-nick="{{message.nick}}" data-pm-to="{{message.to}}">
  {{gravatar id=email image="wavatar" size=48 classes="media-object pull-left img-rounded" }}
  <div class="media-body bb-message-body">
    <div class="pull-right timestamp">{{pretty_ts message.timestamp}}</div>
    <h5 class="media-heading"><span title="{{message.nick}}{{nickLocation message.nick}}" class="{{#if nickNear message.nick}}near{{/if}}">{{nickOrName message.nick}}</span>
          {{#if message.to}}
    <small>(Private message to {{nickOrName message.to}})</small>
          {{/if}}
    </h5>
    {{body}}
  </div>
</div>
        {{/if}}
        {{#if isLastRead message.timestamp}}
<div class="bb-message-last-read">read</div>
        {{/if}}
      {{/if}}
    {{else}}
      <p align="center">
{{#if ready}}
No chat messages{{#if timestamp}} before {{pretty_ts timestamp}}{{/if}}.
{{else}}
...loading messages...
{{/if}}
      </p>
    {{/each}}

    {{#if timestamp}}{{#if ready}}
      <p align="center">
      {{#if nextTimestamp}}
      <a href="{{nextTimestamp}}" class="chat-link">See next page of logs</a>;
      {{/if}}
      <a href="/chat/{{room_name}}" class="chat-link">See most recent logs</a>
      </p>
    {{/if}}{{/if}}
    {{! Ensure there's always a small "last-child" here to scroll to.}}
    <p id=chat-bottom></p>
  </div>
</template>