header.html

<template name="header">

<div class="navbar navbar-inverse navbar-fixed-top bb-topbar">
  <div class="navbar-inner">
    {{> header_loginmute}}
    {{#unless compactHeader}}
    {{> header_lastupdates}}
    {{> header_lastchats}}
    {{/unless}}
    {{> header_breadcrumbs}}
  </div>
</div>

</template>

<template name="header_breadcrumbs">
<div class='bb-breadcrumbs{{#if currentPageEquals "blackboard"}} bb-omit-when-narrow{{/if}}'>
  {{#if drive}}
<span class="bb-drive-buttons">
  <button type="button"
          class="bb-upload-file btn btn-inverse">
    <i class="icon-upload icon-white"></i> Upload file
  </button>
  <a class="bb-drive-link btn btn-inverse"
     title="Open Drive Folder"
     target="_blank"
     href="{{drive_link drive}}"><i class="icon-inbox icon-white"></i></a>
</span>
  {{/if}}
<ul class="nav">
  <li class="{{#if currentPageEquals "blackboard"}}active{{/if}}"><a href="/" class="home-link"><i class="icon-home icon-white"></i> Blackboard</a></li>
  {{#if round}}
  <li class="{{#if currentPageEquals "round"}}active{{else}}bb-omit-when-narrow{{/if}}">
    <a href="/rounds/{{round._id}}" class="rounds-link">
      <i class="icon-folder-open icon-white"></i> Round: {{round.name}}
      {{#if round.link}} <span class="fake-link" data-href="{{round.link}}" title="Link to hunt site"><i class="icon-share-alt icon-white"></i></span>{{/if}}
      {{#if round.spreadsheet}} <span class="fake-link" data-href="{{spread_link round.spreadsheet}}" title="Link to round spreadsheet"><i class="icon-th icon-white"></i></span>{{/if}}
    </a>
  </li>
  {{/if}}
  {{#if puzzle}}
  <li class="{{#if currentPageEquals "puzzle"}}active{{else}}bb-omit-when-narrow{{/if}}">
    <a href="/puzzles/{{puzzle._id}}" class="puzzles-link">
      <i class="icon-book icon-white"></i> Puzzle: {{puzzle.name}}
      {{#if puzzle.link}} <span class="fake-link" data-href="{{puzzle.link}}" title="Link to hunt site"><i class="icon-share-alt icon-white"></i></span>{{/if}}
      {{#if puzzle.spreadsheet}} <span class="fake-link" data-href="{{spread_link puzzle.spreadsheet}}" title="Link to puzzle spreadsheet"><i class="icon-th icon-white"></i></span>{{/if}}
    </a>
  </li>
  {{/if}}
  {{#if currentPageEquals "quip"}}
  <li class="active"><a><i class="icon-check icon-white"></i> {{#if idIsNew}}Add New Quip{{else}}Quip: {{quip.name}}{{/if}}</a></li>
  {{else if currentPageEquals "oplog"}}
  <li class="active"><a><i class="icon-time icon-white"></i> Operation Logs</a></li>
  {{else if currentPageEquals "facts"}}
  <li class="active"><a><i class="icon-wrench icon-white"></i> Server Facts</a></li>
  {{else}}
    {{#if currentPageEquals "callins"}}
      <li class="active"><a><i class="icon-check icon-white"></i> Answer Queue</a></li>
    {{/if}}
    <li class="{{#if currentPageEquals "chat"}}active{{else}}bb-omit-when-narrow{{/if}}">
    <a href="/chat/{{type}}/{{id}}" class="chat-link"><i class="icon-comment icon-white"></i>
    {{#if typeEquals "roundgroups"}}{{link id=id editing=true}}{{/if}}
    {{#if typeEquals "rounds"}}Round{{/if}}
    {{#if typeEquals "puzzles"}}Puzzle{{/if}}
    {{#if typeEquals "general"}}General{{/if}}
    chat</a></li>
  {{/if}}
</ul>
  {{#if currentPageEquals "chat"}}
    {{> chat_header }}
  {{/if}}
</div>
</template>

<template name="header_loginmute">
<!-- login/mute buttons -->
  <div class="bb-buttonbar {{#unless compactHeader}}pull-right{{/unless}}">
   <div>
    {{#if sessionNick}}
     <div class="btn-group{{#if compactHeader}} bb-login{{/if}}">
      <a class="btn btn-small btn-inverse dropdown-toggle"
         data-toggle="dropdown" href="#">
       {{#if sessionNick.gravatar}}
       {{gravatar id=sessionNick.gravatar size=20 image="wavatar"}}
       {{else}}
       <i class="icon-user icon-white"></i>
       {{/if}}
       {{#if sessionNick.realname}}
         {{sessionNick.realname}}
       {{else}}
         {{sessionNick.name}}
       {{/if}}
       <span class="caret"></span>
      </a>
      <ul class="dropdown-menu pull-right">
       <li><a href="#" class="bb-logout"><i class="icon-off"></i> Log out</a></li>
      </ul>
     </div>
    {{else}}
    <button class="btn btn-small btn-inverse bb-login">
     <i class="icon-user icon-white"></i>
     Log in to {{#if currentPageEquals "chat"}}chat{{else}}edit{{/if}}
    </button>
    {{/if}}
   </div>
   <div class="btn-toolbar">
    <div class="btn-group">
      <a title="Codex Wiki {{wikipage}}"
         class="wiki btn btn-small btn-inverse"
         target="_blank"
         href="{{wiki title=wikipage}}"><img src="/img/w.png"
         width=14 height=14 /></a>
    </div>
{{#if currentPageEquals "blackboard"}}
    <div class="btn-group">
     <button title="Protect page" data-canEdit="false"
             class="bb-protect btn btn-small btn-inverse {{#unless canEdit}}active{{/unless}}">
      <i class="icon-lock icon-white"></i>
     </button>
     <button title="Allow edits to puzzles" data-canEdit="true"
             class="bb-unprotect btn btn-small btn-inverse {{#if canEdit}}active{{/if}} {{#unless sessionNick}}disabled{{/unless}}">
      <i class="icon-pencil icon-white"></i>
     </button>
    </div>
{{/if}}
{{#if currentPageEquals "chat"}}
    <div class="btn-group">
     <button title="{{botTitle}}" class="nobot btn btn-small btn-inverse">
      <span class="{{botIcon}} icon-white"></span>
     </button>
    </div>
{{/if}}
    <div class="btn-group">
     <button title="{{volumeTitle}}" class="mute btn btn-small btn-inverse">
      <span class="{{volumeIcon}} icon-white"></span>
     </button>
    </div>
   </div>
  </div>
</template>

<template name="header_lastupdates">
<!-- Last update bar -->
  <div class="bb-lastupdate">
    <span class="right pull-right">
    <a href="/oplogs/0" class="oplogs-link"
       title="Complete blackboard update log">more...</a>
    </span>
    <span class="left pull-left label label-inverse">
    Last update:
    </span>
    <span class="center">
    {{#with lastupdates}}
    <span class="timestamp">{{pretty_ts timestamp}}</span>
    {{message}}
    <span class="comma-list">{{#each objects}}{{link id}}{{/each}}</span>
    {{#if nick}} (<strong title="{{nickOrName nick}}">{{nick}}</strong>){{/if}}
    {{/with}}
    </span>
  </div>
</template>

<template name="header_lastchats">
<!-- Last chat bar -->
  <div class="bb-lastchat">
    <div class="right pull-right">
      <a href="/chat/general/0" class="chat-link"
         title="Complete ringhunters chat">more...</a><br/>
      <a href="/chat/general/0" class="chat-link bb-pop-out"
         title="Pop out ringhunters chat"
         target="chat0">pop out <i class="icon-share-alt icon-white"></i></a>
    </div>
    <span class="left pull-left label label-inverse">
      Ringhunters:
    </span>
    <span class="center">
    {{#each lastchats}}
    <p class="messageRow">
    <span class="timestamp">{{pretty_ts timestamp}}</span>
    {{#if action}}
      <strong title="{{nickOrName nick}}">{{nick}}</strong> {{msgbody}}
    {{else}}
      <strong title="{{nickOrName nick}}">{{nick}}:</strong>
      {{#if to}}/msg <span title="{{nickOrName to}}">{{to}}</span>{{/if}}
      {{msgbody}}
    {{/if}}
    </p>
    {{/each}}
    </span>
  </div>
</template>

<template name="header_nickmodal">
  <div class="modal" id="nickPickModal">
    {{! only insert contents if visible; this lets us manage
        dependencies so we're not updating invisible content }}
    {{#if nickModalVisible}}{{> header_nickmodal_contents }}{{/if}}
  </div>
</template>

<template name="header_nickmodal_contents">
    <div class="modal-header">
      {{#unless currentPageEquals "chat"}}
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      {{/unless}}
      <h3>Pick a Nick Name</h3>
    </div>
    <div class="modal-body">
      <form id="nickPick" class="form-horizontal">
        <div class="control-group" id="nickInputGroup">
          <label class="control-label" for="nickInput">Nick</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">@</span>
              <input type="text" id="nickInput" autocomplete="nickname"
                     inputmode="verbatim"
                     placeholder="nick" autofocus />
            </div>
            <span class="help-inline"></span>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="nickRealname">Real Name</label>
          <div class="controls">
            <input type="text" id="nickRealname" autocomplete="name"
                   inputmode="latin-name"
                   placeholder="J. Random Codexian" />
            <span class="help-inline">(optional)</span>
          </div>
        </div>
        <div class="pull-right gravatar"></div>
        <div class="control-group">
          <label class="control-label" for="nickEmail">Email</label>
          <div class="controls">
            <input type="email" id="nickEmail" autocomplete="email"
                   placeholder="user@host.org" />
            <span class="help-inline">(optional)</span>
            <span class="help-block">Only used to look up
            <a href="https://gravatar.com" target="_blank">Gravatar</a></span>
          </div>
        </div>
      <input type="hidden" id="nickSuccess" value="false" />
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary bb-submit">
      {{#if currentPageEquals "chat"}}
      Start Chatting
      {{else}}
      Log in
      {{/if}}
      </button>
    </div>
</template>

<template name="header_confirmmodal">
  <div class="modal hide" id="confirmModal">
    {{! only insert contents if visible; this lets us manage
        dependencies so we're not updating invisible content }}
    {{#if confirmModalVisible}}{{> header_confirmmodal_contents }}{{/if}}
  </div>
</template>

<template name="header_confirmmodal_contents">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
    <h3>Are you sure?</h3>
  </div>
  <div class="modal-body">
    <p>{{options.message}}</p>
  </div>
  <div class="modal-footer">
    <button class="btn bb-confirm-ok">{{options.ok_button}}</button>
    <button class="btn bb-confirm-cancel btn-primary" data-dismiss="modal" aria-hidden="true">{{options.no_button}}</button>
  </div>
</template>