{% extends 'base.html' %}

{% load bootstrap3 staticfiles i18n %}

{% block admintab %} class=active{% endblock %}

{% block content %}

<div class="panel panel-default">
    <div class="panel-heading">
        <h3>{% trans "Home page" %}</h3>
    </div>
    <div class="panel-body">
        <form method="post" role="form">
        {% csrf_token %}
          {% bootstrap_field form.cfp_opening_date addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
          {% bootstrap_field form.cfp_closing_date addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
          {% bootstrap_form form exclude='cfp_opening_date,cfp_closing_date,home' %}
          <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#editor" role="tab" data-toggle="tab">Editor</a></li>
            <li><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
            <li><a href="https://daringfireball.net/projects/markdown/syntax" target="blank" role="tab">Syntaxe</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="editor" style="max-height: 220px; margin-bottom: 20px;">
              <div class="form-group">
                <textarea style="width: 100%; height: 220px;" id="markdown-content" name="home">{{ conference.home }}</textarea>
              </div>
            </div>
            <div class="tab-pane well" id="preview" style="min-height: 220px; magin-bottom: 20px;">
              <div id="preview-content"></div>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Submit</button>
            </div>
          </div>
        </form>
    </div>
</div>

{% endblock %}

{% block css %}
{{ block.super }}
{{ form.media.css }}
<link rel="stylesheet" href="{% static 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css' %}" />
{% endblock css %}

{% block js_end %}
{{ block.super }}
{{ form.media.js }}
<script type="text/javascript">
var markdown_preview_url = "{% url 'markdown' %}";
</script>
<script src="{% static 'moment/min/moment.min.js' %}"></script>
<script src="{% static 'eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'jquery.cookie/jquery.cookie.js' %}"></script>
<script src="{% static 'js/markdown-preview.js' %}"></script>
<script type="text/javascript">
$(function() {
    $("#id_cfp_opening_date").datetimepicker({
        "format": "YYYY-MM-DD HH:mm",
        "widgetPositioning": {
            "horizontal": "right",
            "vertical": "auto"
        },
        "showClear": true
    });
    $("#id_cfp_closing_date").datetimepicker({
        "format": "YYYY-MM-DD HH:mm",
        "widgetPositioning": {
            "horizontal": "right",
            "vertical": "auto"
        },
        "showClear": true
    });
});
</script>
{% endblock js_end %}