{% extends 'layout.html' %}
{% block js %}
 <script>
    $(function(){
      {% if partials %}
        {% for name, value in partials.items() %}
          {% if name and value %}
            try {
              Handlebars.registerPartial({{ name|tojson|safe }}, {{ value.data|tojson|safe }});
            } catch(e) {
              // no data?
            }
          {% endif %}
        {% endfor %}
      {% endif %}
        $("#start-togetherjs").click(function(){
            $(this).prop('disabled', true).html("Loading");
        });
    });
    TogetherJSConfig_toolName = "Collaboration";
    TogetherJSConfig_suppressJoinConfirmation = true;
    {% if current_user.is_authenticated() %}
    TogetherJSConfig_getUserName = function () {
        return {{ current_user.username|tojson }};
    };

    TogetherJSConfig_getUserAvatar = function () {
        return {{ current_user.avatar|tojson }};
    };
    {% endif %}

    TogetherJSConfig_on_ready = function () {
       MDR.sanitize = true;
       $("#preview").html('');
       $("#start-togetherjs").addClass('btn-danger').html('End Collaboration').prop('disabled', false);
    };
    TogetherJSConfig_on_close = function () {
        MDR.sanitize = false;
        $("#start-togetherjs").removeClass('btn-danger').html('Collaborate').prop('disabled', false);
    };
</script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
{% endblock %}

{% block body %}
  <div id="app-wrap">
    <div id="app-controls" class="row">
      <div class="col-xs-4 col-md-3">
        <input id="page-name" type="text" class="form-control input-sm" name="name" placeholder="Name" value="{{- name -}}" />
      </div>
      <div class="col-xs-4 col-md-3">
        <input id="page-message" type="text" class="form-control input-sm" name="page-message" placeholder="Comment" value="" />
      </div>

      <div class="col-md-6 col-xs-4">
        <div class="pull-right">

          <button class="btn btn-default btn-sm" id="start-togetherjs" type="button"
                  onclick="TogetherJS(this); return false">

            <i class="fa fa-comments-o visible-xs"></i>
            <span class="hidden-xs">Collaborate</span>
          </button>

          <a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
            <i class="fa fa-paint-brush visible-xs"></i>
            <span class="hidden-xs">Theme <i class="fa fa-caret-down"></i></span>
          </a>
          <ul id="theme-list" class="dropdown-menu" role="menu" aria-labelledby="drop6">
            <li><a tabindex="-1" href="#" data-value="ace/theme/chrome" >Chrome</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/clouds" >Clouds</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/clouds_midnight" >Clouds Midnight</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/cobalt" >Cobalt</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/crimson_editor" >Crimson Editor</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/dawn" class="selected">Dawn</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/dreamweaver" >Dreamweaver</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/eclipse" >Eclipse</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/idle_fingers" >idleFingers</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/kr_theme" >krTheme</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/merbivore" >Merbivore</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/merbivore_soft" >Merbivore Soft</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/mono_industrial" >Mono Industrial</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/monokai" >Monokai</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/pastel_on_dark">Pastel on Dark</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/solarized_dark" >Solarized Dark</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/solarized_light" >Solarized Light</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/textmate" >TextMate</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow" >Tomorrow</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night">Tomorrow Night</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_blue" >Tomorrow Night Blue</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_bright" >Tomorrow Night Bright</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_eighties" >Tomorrow Night 80s</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/twilight" >Twilight</a></li>
            <li><a tabindex="-1" href="#" data-value="ace/theme/vibrant_ink" >Vibrant Ink</a></li>
          </ul>
          {% if name in config.LOCKED %}
            <a class="btn btn-danger btn-sm">
              <i class="fa fa-lock"></i>
              <span class="hidden-xs">Locked</span>
            </a>
          {% else %}
            <a id="save-native" class="btn btn-primary btn-sm">
              <i class="fa fa-save"></i>
              <span class="hidden-xs">Save</span>
            </a>
          {% endif %}
        </div>
      </div>
    </div>

  <section class="entry-markdown active">
    <header class="floatingheader" id="entry-markdown-header">
        <small>Markdown</small>
        <a class="markdown-help" href=""><span class="hidden">What is Markdown?</span></a>
    </header>
    <section id="entry-markdown-content" class="entry-markdown-content">
      <div id="editor" class="ace-editor">{{ content }}</div>
    </section>
  </section>

  <section class="entry-preview">
    <header class="floatingheader" id="entry-preview-header">
        <small>Preview</small>
    </header>
    <section class="entry-preview-content">
      <div id="preview"></div>
     </section>
  </section>

  <input id="sha" type="hidden" name="sha" value="{{ sha }}" />

  </div>

{% endblock %}