{% load cache pages_tags i18n %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ lang }}" xml:lang="{{ lang }}" >
{% comment %}Important to enable other applications to inherit the template{% endcomment %}
{% load_pages %}
<head>
<title>
    {% show_content current_page "title" %}
</title>
<script type="text/javascript" src="{{ PAGES_MEDIA_URL }}javascript/jquery.js" /></script>
<style>
    .placeholder-editable {
        border:1px #ccc solid;
        background:#fff;
        min-height:1em;
        padding:5px;
        cursor:text;
        overflow:hidden;
        height:1%;
    }

    .placeholder-editable input {
        float:right;
        padding:4px 10px;
        margin-top:3px;
    }

    .placeholder-over, .edit {
        border:1px #999 solid;
        background:#5c705c;
        color:#fff;
        cursor: hand;
    }

    .edit {
        padding:5px;
    }

    body {
        font-family:sans-serif;
        color:#333;
        font-size:14px;
    }

    #main {
        max-width:960px;
        padding:20px;
        margin:0 auto;
        border:1px #999 solid;
        -webkit-border-radius:10px;
        -webkit-box-shadow: inset 2px 5px 10px rgba(180,180,180,0.2);
        -moz-border-radius:10px;
        -moz-box-shadow: inset 2px 5px 10px rgba(180,180,180,0.2);
        border-radius:10px;
        box-shadow: inset 2px 5px 10px rgba(180,180,180,0.2);
        margin-bottom:40px;
        overflow:hidden;
    }

    h1, h2 {
        border-bottom:1px #ddd solid;
        color:#a4b854;
    }

    a {
        color:#ff7959
    }
</style>
</head>
<body>
<div id="main">
<div style="float:right">
    <form action="/search/" method="get" style="float:left;margin-right:10px;">
        <label>{% trans "Search" %} <input type="text" name="q"></label>
        <input type=hidden value="pages.page" name="models" >
    </form>

    {% if user.is_authenticated %}
        <a href="/admin/logout/">log out</a>
    {% else %}
        <a href="/admin/">log in</a>
    {% endif %}
</div>

<h1 id="title" class="placeholder">{% placeholder title on current_page with TextInput %}</h1>

<h2>Navigation</h2>

<ul>
    {% for page in pages_navigation %}
        {% pages_menu page %}
    {% endfor %}
</ul>

<h2>Content</h2>

{% if in_document_view %}
<p>
    <strong>You have delegated the rendering of this page to the document view.</strong>
</p>
{% if document %}
<p>
    <strong>You selected this document: {{ document.title }}</strong>
</p>
{% endif %}
<ul>
{% for doc in documents %}
<li><a href="{% url document_details path=current_page.get_complete_slug document_id=doc.id %}">{{ doc.title }}</a></li>
{% endfor %}
</ul>
{% endif %}

{% block content %}
    {% placeholder right-column with RichTextarea parsed as right_column %}
    <div style="float:right;width:25%">
    <h3>Right column placeholder</h3>
    <div class="right_column">{{ right_column }}</div>
    </div>
    
    {% if current_page %}
    <div style="width:70%">

        <div>Body placeholder
            <div id="body" class="placeholder">{% placeholder body with RichTextarea %}</div>
        </div>

        {% imageplaceholder body-image as imgsrc %}
        {% if imgsrc %}
            <img src="{{ MEDIA_URL }}{{ imgsrc }}" alt=""/>
        {% endif %}

    </div>
    {% endif %}
{% endblock %}

</div>

<script type="text/javascript">
$(function(){
    // quick and dirty edit in place example
    {% if request.user.is_authenticated %}
        $('.placeholder').addClass('placeholder-editable');
    {% endif %}
    
    $('.placeholder-editable').mouseover(function() {
        $(this).addClass('placeholder-over');
    });
    
    $('.placeholder-editable').mouseout(function() {
        $(this).removeClass('placeholder-over');
    });
    
    $('.placeholder-editable').click(function() {
        var p = $(this);
        if(p.hasClass('edit')) {
            return false;
        }
        p.addClass('edit');
        var height = p.height()+20;
        var width = p.width()-10;
        p.html('<textarea style="width:'+width+'px;height:'+height+'px">'+ this.innerHTML +'</textarea><input type="submit" value="Save" />');
        $('input', p).click( function() {
            var content = $('textarea', p).val();
            $.post('/admin/pages/page/{{ current_page.id }}/modify-content/'+p.attr('id')+'/{{ lang }}/', {'content':content}, function(response) {
                if(response=="ok") {
                    p.html(content);
                    p.removeClass('edit');
                    p.removeClass('placeholder-over');
                } else {
                    alert("You need to authenticate to the admin to edit the content");
                }
            });
            return false;
        });
    });
});
</script>


{% include "pages/examples/debug.html" %}

</body>
</html>
