<head>
  <title>textcircle</title>
</head>

<body>
  {{> navbar }}
  <div class="container top-margin">
    <div class="row">
      <div class="col-md-12">
        {{> editingUsers }}
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        {{> editor}}
      </div>
      <div class="col-md-6">
        {{> viewer }}
      </div>
    </div>
  </div>
</body>

<template name="navbar">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">TextCircle</a><!-- nav title -->
      <ul class="nav navbar-nav">
        <li>
          <a href="#" class="js-add-doc">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            New document
          </a>
        </li>
        <!-- drop down list -->
        <li role="presentation" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Documents <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            {{#each documents }}
            <li><a href="#" class="js-load-doc">{{ title }}</a></li>
            {{/each}}
          </ul>
        </li>
        <!-- end drop down list -->
      </ul>

      <p class="navbar-text navbar-right">
        {{> loginButtons align="right" }}
      </p>
    </div><!-- /nav container -->
  </nav><!-- /nav -->
</template>

<template name="editor">
  <h2>doc id: {{ docid }}</h2>
  {{> sharejsCM docid=docid onRender=config id="editor" }}
</template>

<template name="viewer">
  <iframe id="viewer_iframe">
  </iframe>
</template>

<template name="editingUsers">
  Editors:
  {{#each users }}
  <span class="label label-success">{{firstname}}</span>

  {{/each}}
</template>