{% extends "waliki/detail.html" %}
{% load i18n %}
{% load bootstrap_tags %}
{% load waliki_tags %}
{% block title %}<h1>{% trans "Editing" %}: {{ page.slug }}</h1>{% endblock title %}

{% block extra_head %}
 {{ form.media.css }}

 {% entry_point 'edit_extra_head' %}
{% endblock %}



{% block content %}

<div class="row">
<div id="waliki_editor" class="col-sm-12 col-md-12">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
    <li class="active"><a href="#editor" data-toggle="tab">{% trans "Editor" %}</a></li>
    <li><a href="#preview" data-toggle="tab" id="previewlink">{% trans "Preview" %}</a></li>
    <li class="pull-right">

            {% extra_edit_actions page %}

            <div class="btn-group btn-group-sm">

                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                   <span data-bind="label">{{ page.markup }}</span>&nbsp;&nbsp;<span class="caret"></span>
                 </button>
                 <ul id="markup_menu" class="dropdown-menu" role="menu">
                    {% for markup, mode in cm_modes %}
                   <li><a href="#" data-mode="{{ mode }}">{{ markup }}</a></li>
                    {% endfor %}
                 </ul>

            </div>

            <div class="btn-group btn-group-sm">

                 <button id="fullscreen" type="button" class="btn btn-default"><span class="glyphicon glyphicon-resize-full"></span> </button>

            </div>
    </li>

</ul>
<div class="tab-content">
    <div class="tab-pane active pad" id="editor">

        <form method="post" class="form">
            {% csrf_token %}
            {{ form|render_form }}

            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="form-actions">
                        <div class="pull-left">
                          <a class="btn btn-default" href="#preview" id="previewbtn">{% trans "Preview" %}</a>
                        </div>
                        <div class="pull-right">
                            <a class="btn btn-default" href="{% url 'waliki_detail' page.slug|default:slug %}">{% trans "Cancel" %}</a>
                            <button class="btn btn-success" type="submit">{% trans "Save" %}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane pad" id="preview"></div>
</div>
</div>
</div>

{% entry_point 'edit_content' %}
{% endblock content %}

{% block extra_script %}
<script type="text/javascript">
$('#previewlink').on('click', function() {
    var $form = $('.form');
  var $inputs = $form.find('input, textarea, button');
  var $pre = $('#preview');
  var bodycontent = editor.getValue();
  $inputs.prop('disabled', true);
  $pre.removeClass('alert').removeClass('alert-error').html('{% trans "Loading..." %}');
  $.ajax({
    url: "{% url 'waliki_preview' %}",
    type: "POST",
    data: { text: bodycontent, markup: '{{ page.markup }}' },
    success: function(msg) {
      $pre.html(msg.html);
    },
    error: function() {
            $pre.addClass('alert').addClass('alert-error');
      $pre.html('{% trans "There was a problem with the preview." %}');
    },
    complete: function() {
      $inputs.prop('disabled', false);
    }
  });
});
$('#previewbtn').on('click', function(event) {
    event.preventDefault();
    $('#previewlink').click();
});

var cm_settings = {{ cm_settings|safe }};
</script>

{{ form.media.js }}

{% entry_point 'edit_extra_script' %}
{% endblock extra_script %}