{% extends "base.html" %}
{% load staticfiles %}

{%block YACMS_HEAD %}

<link href="{%static "yacms/css/pageadmin.css" %}" rel="stylesheet">
<link href="{%static "yacms/css/yacms.css" %}" rel="stylesheet">

<script>
var view_json = {{view_object.json_data | safe}}
</script>

<link rel="stylesheet" href="/static/yacms/mediauploader/css/jquery.fileupload.css">
<link rel="stylesheet" href="/static/yacms/mediauploader/css/jquery.fileupload-ui.css">

 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/static/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="/static/datetimepicker/jquery.datetimepicker.css"/ >


{%endblock YACMS_HEAD %}


{%block META_DESCRIPTION %}{{view_object.introduction}}{% endblock META_DESCRIPTION %}
{% block TITLE%} {{view_object.title}}{% endblock TITLE %}
{% block BODY_TITLE%} {{view_object.title}} [edit]{% endblock BODY_TITLE %}


{% block PAGE_CONTENT %}

<div class="container">
    <div class="row-fluid">
        <div class="col-md-12 page-content" >
        {{view_object.html_content | safe }}
        </div>
    </div>
</div>

{% if view_object.request.user.username == "admin" %}


<div class="col-md-12">
        <h3>Page Admin</h3>
        <!-- tabs -->
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">Content Editor</a></li>
            <li class=""><a href="#two" data-toggle="tab" id="file-uploader-tab">File Uploader</a></li>
            <li class=""><a href="#three" data-toggle="tab">Page Meta Editor</a></li>
          </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="one">
                    <div class="pageadmin_menu_container">
                      <a href="#" id='editor_save_button' class="btn btn-primary" role="button">Save</a>
                      <!-- a href="#" class="btn btn-primary" role="button" id="editor_publish">Publish</a -->
                      <!-- a href="#" class="btn btn-primary" role="button" id="editor_frontpage">Frontpage</a -->
                        <div class="pageadmin_checkbox"><input id="published_checkbox" type="checkbox" name="published" value="published"  onclick="handle_published_checked(this)">published</div>
                        <div class="pageadmin_checkbox"><input id="frontpage_checkbox" type="checkbox" name="frontpage" value="frontpage"  onclick="handle_frontpage_checked(this)">frontpage</div>
                    </div>

                <div class='clear'></div>
                <div><textarea id="editor_textarea" style="width:100%" rows="30" ></textarea></div>
            </div>


            <div class="tab-pane" id="two">


                <div class="row">

                    <div id="gallery" class="span12"></div>
                </div>


                <div class="row">
                                    <div class="span12" style="margin-top:15px;">
                                        <div class="fileinput-button" style="float:left; margin-right:10px;">
                                            <input type="file" id="addfiles" multiple="multiple" /> <button class="btn btn-warning">Add Files</button>
                                        </div>

                                        <div>
                                         <button class="btn btn-warning" id="upload-files">Upload Files</button>
                                        </div>
                                    </div>
                </div>


                <div id="yacms_gallery"></div>

                <!-- end yacms_gallery-->

            </div>
            <!-- end tab pane-->


            <div class="tab-pane" id="three">
                <form action="" method="POST">      {% csrf_token %}
                    <div class="span10">

                       <div class="row-fluid">
                          <div class="span2">date_created:</div><div class="span8"><input type="text" id="date_created" name="date_created"></input></div>
                       </div>
                       <div class="row-fluid">
                          <div class="span2">date_modified</div><div class="span8"><input type="text" id="date_modified" name="date_modified"></input></div>
                       </div>


                       <div class="row-fluid">
                          <div class="span2"> <button type="button" class="btn btn-primary" id="update_date">Update Date!</button></div>
                           <div class="span8">{{error_msg}} </div>
                       </div>

                    </div>
                </form>
            </div>
        <!-- /tabs -->

        </div>
        <!-- end tab content-->

    </div>
</div>
<div class="clearfix"></div>

{% endif %}



{% endblock PAGE_CONTENT %}



{% block YACMS_JAVASCRIPT %}


<script src="{% static "yacms/js/dustjs/dust-full.min.js" %}"></script>
<script src="{% static "yacms/js/yacms.js" %}"></script>
<script src="/static/yacms/mediauploader/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/datetimepicker/jquery.datetimepicker.full.min.js"></script>

<script>

 $( document ).ready(function() {
    get_content(view_json.content[0]);
});

$('#published_checkbox').prop('checked', view_json.published);
$('#frontpage_checkbox').prop('checked', view_json.frontpage);

$('#frontpage_checkbox').click(function(){

  handle_frontpage_checked(this);

});



$('#update_date').click(function(){
    handle_date_changed_clicked();
});


$('#date_created').val("{{view_object.created_timestamp_str}}");
$('#date_created').datetimepicker();

$('#date_modified').val("{{view_object.modified_timestamp_str}}");
$('#date_modified').datetimepicker();



$('#file-uploader-tab').click(function(){


var images_loaded = false;
url = "assets_manager/";


if (images_loaded == false){
    $.ajax({
           url: url,
           type: 'GET',
           error: function(){
               console.log("Failed to get list of images");
           },
           success: function(data){
               //On Success we create the path
               console.log("get_content: ", data);

              $("#gallery").empty();
               for (var i=0; i<data.length; i++){
                   a = "<div class=\"thumbnail\"> <img src=\""+ data[i] +"\"></div>";
                   $("#gallery").append(a);
               }
           }
       });

    images_loaded = true;
}
});


</script>


{% endblock YACMS_JAVASCRIPT %}
