{% extends 'website/backoffice/base.html' %}
{% load url from future %}

{% block bodyclass %}detail-page{% endblock %}

{% block buttons %}
    {% if button %}
        <a href = '{{ button.url }}' class = '{% firstof button.class 'button' %}'
            data-prompt="Are you sure you want to delete this post?">
            <span>{{ button.text }}</span></a>
    {% endif %}
{% endblock %}


{% block content %}
{{ form.media }}
<form enctype="multipart/form-data" method = 'POST' action = '' class = 'form' id='post-form' target=''>
    {% csrf_token %}
    <ul>
    {% for field in form %}
        <li class = 'field-{{ field.name }}'>
            {{ field.label_tag }}
            <div>
                <p>{{ field }}
                {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}</span>{% endif %}
                </p>
                {{ field.errors }}
            </div>
            
        </li>
    {% endfor %}
    </ul>
    
    {% block form_buttons %}
    <button class = 'button green'><span>Submit</span></button>
    {% endblock %}
    
</form>
{% endblock %}


{% block script %}

{# jquery ui date time picker #}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write('<script src="{{ STATIC_URL }}website/js/jquery-ui.min.js"><\/script>')</script>
<script type="text/javascript" src="{{ STATIC_URL}}website/js/jquery-ui-timepicker-addon.js"></script>
<link href="{{ STATIC_URL}}website/css/jquery-ui-timepicker-addon.css" type="text/css" media="all" rel="stylesheet">

<link href="{{ STATIC_URL}}website/css/token-input-mac.css" type="text/css" media="all" rel="stylesheet">


<script type="text/javascript" src="{{ STATIC_URL}}website/js/jquery.tokeninput.js"></script>
<script>

$(document).ready(function(){ 
    $("#id_tags").tokenInput("{% url 'taggit:autocomplete' %}", {
        {% if obj.tags %}
            prePopulate: [
            {% for tag in obj.tags.all %}
                { id: {{ tag.id }}, name: '{{ tag.name }}' } {% if not forloop.last %},{% endif %}
            {% endfor %}
            ],
        {% endif %}
        hintText: "Type in the topics covered by this post",
        noResultsText: "No previous topic matching your query",
        searchingText: "Searching for previously defined topics...",
        theme: 'mac',
        preventDuplicates: true,
        allowCreation: true
    });
    
    $('#id_published').datetimepicker({ altFormat: 'dd-mm-yy' });
});
</script>

{% if not is_mobile_device %}
    {% include 'fiber/header.html' %}
    {% include 'fiber/ckeditor_js.html' %}
{% endif %}
    {% block ckeditor %}
    <script type="text/javascript">
        
        CKEDITOR.replace('id_content', {
            extraPlugins: 'fimagelink,fcustomlink,funlink',
            removePlugins: 'scayt,menubutton,forms,image,link',
            toolbar:
            [
                ['Format', 'Styles'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['Bold','Italic'],
                ['NumberedList','BulletedList'],
                ['fCustomLink','fUnlink'],
                ['fImage','fTable'],
                ['RemoveFormat'],
                ['Maximize'],
                ['Source']
            ],
            format_tags: 'p;h2;h3;h4',
            stylesSet: 'image_styles',
            toolbarCanCollapse: false,
            baseFloatZIndex: 1100
        });
        
        CKEDITOR.replace('excerpt', {
            extraPlugins: 'fcustomlink,funlink,fimage',
            removePlugins: 'scayt,menubutton,forms,image,link',
            toolbar:
            [
                ['Bold','Italic'],
                ['NumberedList','BulletedList','Outdent','Indent'],
                ['fCustomLink','fUnlink'],
                ['RemoveFormat'],
                ['Maximize'],
                ['Source']
            ],
            format_tags: 'p;h2;h3;h4',
            toolbarCanCollapse: false,
            baseFloatZIndex: 1100
        });
        CKEDITOR.stylesSet.add('image_styles', [
            {name:'Image on Left', element:'img', attributes:{style:'padding: 5px; margin-right: 5px', border:'2', align:'left'}},
            {name:'Image on Right', element:'img', attributes:{style:'padding: 5px; margin-left: 5px', border:'2', align:'right'}}
        ]);
        
    </script>
    {% endblock %}

{% endblock %}