{% extends "pages/base.html" %}
{% load base_tags %}
{% load page_tags %}
{% load perm_tags %}
{% load styled_forms %}
{% load i18n %}

{% block title %}{% firstof MODULE_PAGES_LABEL 'Page' %} Edit{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/pages.css">
<script type="text/javascript" src="{{ TINYMCE_JS_URL }}"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="{{ STATIC_URL }}css/jquery.tagit.css" rel="stylesheet" type="text/css">
<style type="text/css">
    div.forms input[type="button"].previewButton {
		margin-top: 15px;
		padding: 5px;
		cursor: pointer;
	}
</style>
{% endblock %}

{% block body %}

<div class="t">

    {% page_nav request.user page %}

    <h1>{% firstof MODULE_PAGES_LABEL 'Page' %} {% trans "Edit" %}</h1>

    <div class="page-wrap">
        <form action="{% url page.edit page.pk %}" method="post" enctype="multipart/form-data">{% csrf_token %}
    	<div class="forms">
			{{ form|styled_form }}
            <fieldset class="boxy-grey" >
                <legend id="category-title" style="cursor: pointer"><span>+</span> {% trans "Category" %}</legend>
                <div id="category-form">
                    {{ categoryform|styled_form }}
                </div>
            </fieldset>
            <fieldset class="boxy-grey">
                <legend id="meta-title" style="cursor: pointer"><span>+</span> {% trans "SEO Meta" %}</legend>
                <div id="meta-form">
                    {{ metaform|styled_form }}
                </div>
            </fieldset>
            <input type="hidden" id="id_preview_for" name="preview_for"/>
        	<input type="submit" value="{% trans 'Save Page Changes' %}" />
        	<input class="previewButton" type="button" value="Preview"/>
        	{% if page.status %}
        	<div class="form-delete-link">
        	    <a class="delete" title="{% trans 'Link to delete confirmation page' %}" href="{% url page.delete page.pk %}">
        	        {% trans "Delete" %}
        	    </a>
        	</div>
        	{% endif %}
		</div>
        </form>
    </div>

</div>
{% endblock %}

{% block extra_body %}
    {{ block.super }}
	<script type="text/javascript" src="{{ STATIC_URL }}js/global/tinymce.event_handlers.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="{{ STATIC_URL }}js/tag-it.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			// delete confirmation
			$('.add-category').click(function(){
				select_box = $(this).parent().prev().find('select');
				var category = prompt('Category Name?','').toLowerCase();
				category = category.replace('"','')
				var option_html = '<option selected="selected" value="' + category + '">' + category + '</option>';
				if (category) select_box.append(option_html) 
				return false;
			});
			$('.add-sub-category').click(function(){
				select_box = $(this).parent().prev().find('select');
				var sub_category = prompt('Category Name?','').toLowerCase();
				sub_category = sub_category.replace('"','')
				var option_html = '<option selected="selected" value="' + sub_category + '">' + sub_category + '</option>';
				if (sub_category) select_box.append(option_html) 
				return false;
			});
		});
    </script>
    <script type="text/javascript">
        $('#meta-form').hide();
        $('#category-form').hide();
        $('#meta-title').click(function() {
            $('#meta-form').slideToggle('fast');
            if ($('#meta-title span').text() == '+') {
                $('#meta-title span').text('-');}
            else {$('#meta-title span').text('+');}
        });
        $('#category-title').click(function() {
            $('#category-form').slideToggle('fast');
             if ($('#category-title span').text() == '+') {
                $('#category-title span').text('-');}
            else {$('#category-title span').text('+');}
        });
        $("#id_tags").tagit({
            availableTags: [{% all_tags_list %}],
            allowSpaces: true
        });
        
        //Set preview button
        $('input.previewButton').click(function() {
            var form = $('div.page-wrap > form');
		    var url = form.attr('action');
            $('form #id_preview_for').val('edit');
		    form.attr('action', "{% url page.preview page.pk %}");
		    form.attr('target', '_blank');
		    form.submit();
		    
		    form.attr('action', url);
		    form.attr('target', '');
		});
    </script>
{% endblock %}
