sora.html

<template name="dashboardPage">
  <div id="sidebar">
    {{> status}}
    {{> channels}}
    {{> users}}
    {{> logo}}
  </div>
  <div id="main">
    {{> messages}}
    {{> messageForm}}
  </div>
  <div id="readme">
    {{> readme}}
  </div>
</template>

<template name="readme">
<h2> Sora </h2>
<p>
  A <a href="http://slack.com">Slack</a> like chat app.
  just provide basic features and design for only one team. (everyone is here)
</p>

<p>
  You can deploy Sora as you own easily, clone sora`s code, and read meteor docs for details.
</p>

<p>
  <a href="http://www.emoji-cheat-sheet.com/">Emoji</a> supported now.
</p>

<p>
  Powered and hosted by <a href="http://meteor.com/">Meteor</a> and open source at <a href="http://github.com/loddit/sora">Github</a>
</p>

<p>
  Licensed under the Apache License, <a href="http://www.apache.org/licenses/LICENSE-2.0">Version 2.0</a>.
</p>

</template>

<template name="status">
  <div id="status">
    {{> loginButtons align="right"}}
    <img src="{{avatarUrl}}" class="gavatar">
  </div>
</template>

<template name="logo">
  <div id="logo">
    <h1>Sora</h1>
    <small> happy chat for team</small>
  </div>
</template>

<template name="messageForm">
  <form id="message-form">
    <input type="text" id="message-input">
    <input type="submit" id="message-submit" value="submit">
  </form>
</template>

<template name="messages">
<div id="messages">
    <ul>
      {{#each messages}}
        {{> message}}
      {{/each}}
    </ul>
  </div>
</template>

<template name="message">
  <li class="message">
    <img src="{{avatarUrl}}" class="gavatar">
    <div class="message-meta">
      {{userName}}
      <small class="time">
        {{createdAt}}
      </small>
    </div>
    <blockquote class="message-body">
      {{body}}
    </blockquote>
  </li>
</template>

<template name="channels">
  <h4>
      Channels
      {{#if currentUser}}
        <a href="#" id="toggle-manager">manage</a>
      {{/if}}
  </h4>
  <div id="channel-list">
    {{#if isNewUser}}
      <div class="tip">
        click [manage] to join some channels
      </div>
    {{/if}}
    <ul>
      {{#each joinedChannels}}
        {{> channel}}
      {{/each}}
    </ul>
  </div>
  {{> channelManager}}
</template>

<template name="channelManager">
  <div id="channel-manager">
    <ul>
      {{#each allChannels}}
        {{> channel}}
      {{/each}}
    </ul>
    <form id="channel-create">
      <span>Create new Channel</span>
      <input type="text">
      <button> Create </button>
    </form>
  </div>
</template>

<template name="channel">
  <li class={{#if isCurrentChannel}}selected{{/if}}>
    <a href="{{pathFor 'channelPage'}}">#{{name}}</a>
    {{#if unreadCount}}
      <span class="unread-count">
        {{unreadCount}}
      </span>
    {{/if}}
    {{#if isMyOwn}}
      <a href="#" class="channel-action delete">x</a>
    {{else}}
      {{#if isJoined}}
        <a href="#" class="channel-action leave">LEAVE</a>
      {{else}}
        <a href="#" class="channel-action join">JOIN</a>
      {{/if}}
    {{/if}}
  </li>
</template>

<template name="users">
  <h4>Metion</h4>
  <ul>
    {{#each users}}
      {{> user}}
    {{/each}}
  </ul>
</template>

<template name="user">
  <li class={{#if isCurrentMetion}}selected{{/if}}>
    <a href="{{pathFor 'metionPage'}}" class={{#unless status.online}}offline{{/unless}}>@{{username}}</a>
    {{#if unreadCount}}
      <span class="unread-count">
        {{unreadCount}}
      </span>
    {{/if}}
  </li>
</template>