{% extends base_template %}
{% load seahub_tags i18n %}

{% block extra_style %}
{% if filetype == 'Sf' %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}aloha-0.22.3/css/aloha.css" />
{% else %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
<style type="text/css">
.CodeMirror-focused pre.CodeMirror-cursor {
  visibility: visible;
}
.CodeMirror-scroll {
    height:auto;
    min-height:700px;
}
</style>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/monokai.css" />
{% endif %}
<style type="text/css">
#main {
    width:100%; 
}
#footer {
    display:none;
}
#edit-hd, #path-op {
    width:950px;
    margin:0 auto;
}
#path-op {
    padding-bottom:6px;
}
#path-op .path {
    margin-top:1.2em
}
#file-edit {
    min-height:700px;
    padding:30px 0 60px;
    background:#f4f4f4;
    border-top:1px solid #ededed;
}
#sf, #md-view, #edit-tip {
    box-shadow:0 0 6px #ccc;
    min-height:620px;
    border:1px solid #ccc;
    margin:0 auto;
}
#edit-tip {
    min-height:200px;
    padding:10px;
    width:928px;
    background:#fff;
    margin:0 auto;
}
.fixed-path-op {
    position:fixed;
    background:#fff;
    border-bottom:1px solid #ededed;/*for ie*/
    box-shadow:0 1px 3px #777;
    z-index:1010;/*make seaf image show below path-op*/
}
.CodeMirror {
    {% if filetype == 'Markdown' or fileext == 'txt' or fileext == 'text' %}
    width:818px;
    {% else %}
    width:950px;
    {% endif %}
    margin:0 auto;
    box-shadow:0 0 6px #272822;
}
</style>
{% endblock %}

{% block main_panel %}
    <h2 id="edit-hd">{% trans "Edit" %} <span class="op-target">{{ u_filename }}</span></h2>
    <div id="path-op" class="ovhd">
        <p class="path fleft">
         {% trans "Current path: " %}
         {% for name, link in zipped %}
            {% if not forloop.last %}
                <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/?p={{ link|urlencode }}">{{ name }}</a> /               
            {% else %}
                <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/files/?p={{ path }}">{{ name }}</a>
            {% endif %}
         {% endfor %}
         </p>
         <div id="op-after-edit" class="fright hide">
             {% if filetype == 'Markdown' %}
             <button id="source-code-btn" class="hide">{% trans "Continue editing" %}</button>
             <button id="preview-btn">{% trans "Preview" %}</button>
             {% endif %}
             <button id="file-edit-submit">{% trans "Submit" %}</button>
             <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/files/?p={{ path }}" id="file-edit-cancel">{% trans "Cancel" %}</a>
         </div>
    </div>
    <div id="file-edit">
        {% if err %}
            <div id="edit-tip" class="article">
                <p class="error">{{ err }}</p>
            </div>
        {% else %}
            {% if file_content != None %}
                {% if filetype == 'Text' or filetype == 'Markdown' %}
                    <textarea id="docu-view" class="hide">{{ file_content|escape }}</textarea>
                    {% if filetype == 'Markdown' %}
                    <div id="md-view" class="article hide"></div>{% comment %} for preview {%endcomment%}
                    {% endif %}
                {% endif %}

                {% if filetype == 'Sf' %}
                    <div id="sf" class="article">{{ file_content|safe }}</div>
                {% endif %}
            {% endif %}
        {% endif %}
    </div>

    {% if not err and repo.encrypted %}
    <form id="repo-decrypt-form" class="simple-input-popup hide">
        <h3>{% trans 'Library' %} <span class="op-target">{{repo.name}}</span> {% trans 'is encrypted' %}</h3>
        <label>{% trans 'Password：' %}</label><br />
        <input type="password" name="password" maxlength="15" class="long-input" />
        <p class="tip">{% trans 'The password will be kept in the server for only 1 hour.' %}</p>
        <p class="error"></p>
        <input type="submit" class="submit" value="{% trans 'Submit' %}" />
        <button class="simplemodal-close">{% trans 'Cancel' %}</button>
    </form>
    {% endif %}
{% endblock %}

{% block extra_script %}
{% if not err and file_content != None %}
{% if filetype == 'Sf' %}
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.3/lib/require.js"></script>
<script type="text/javascript">
//settings must be before aloha.js
Aloha = window.Aloha || {}; 
Aloha.settings = Aloha.settings || {}; 
if ($('#lang-context').data('lang') == 'zh-cn') {
    Aloha.settings.locale = "zh-hans";
}
</script>
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.3/lib/aloha.js" data-aloha-plugins="common/format, common/abbr, common/align, common/characterpicker, common/image, common/link, common/list, common/table, common/undo, common/ui"></script>
{% else %}
<script type="text/javascript" src="{{MEDIA_URL}}codemirror/codemirror-2.36.js"></script>
{% if filetype == 'Markdown' %}
<script type="text/javascript" src="{{MEDIA_URL}}js/showdown.js"></script>
{% endif %}
{% endif %}
{% endif %}
<script type="text/javascript">
{% if not err and file_content != None %}
$(window).scroll(function() {
    var offset = $('#edit-hd').offset();
    if ($(window).scrollTop() > offset.top + $('#edit-hd').height()) {
        $('#path-op').addClass('fixed-path-op').css({'left':0, 'top':0, 'padding-left':offset.left, 'padding-right':offset.left});
        $('#edit-hd').css('margin-bottom', $('#path-op').outerHeight());
    } else {
        $('#path-op').removeClass('fixed-path-op').removeAttr('style');
        $('#edit-hd').css('margin-bottom', 0);
    }
});
{% if filetype == 'Sf' %}
Aloha.ready(function() {
    if ($.browser.msie) {
        $('#sf').aloha();
    } else {
        $('#sf').aloha().focus();
    }
});
{% else %}
var editor = CodeMirror.fromTextArea($('#docu-view')[0], {
    {% include "snippets/editor_set_mode.html" %}
    {% if filetype == 'Markdown' %}
    mode: 'markdown',
    {% endif %}
    theme: 'monokai',
    indentUnit: 4,
    lineNumbers: true,
    lineWrapping: true,
    onCursorActivity: function() {
        var cursor = editor.cursorCoords(true, 'page');
        if (cursor.yBot >= $(window).height() + $(window).scrollTop() - 60) {
           $(window).scrollTop($(window).scrollTop() + parseInt($('#file-edit').css('padding-bottom')));
        }
    },
    autofocus: true
});
{% endif %}
$('#op-after-edit').removeClass('hide');

{% if filetype == 'Markdown' %}
$('#source-code-btn').click(function() {
    $('#md-view, #source-code-btn').addClass('hide');
    $('.CodeMirror, #preview-btn').removeClass('hide');
    editor.focus();
});
$('#preview-btn').click(function() {
    var content = editor.getValue();
    var converter = new Showdown.converter();
    $('.CodeMirror, #preview-btn').addClass('hide');
    $('#md-view').html(converter.makeHtml(content)).removeClass('hide');
    $('#md-view').children(':first').css('margin-top', '0');
    $('#source-code-btn').removeClass('hide');
});
{% endif %}

$('#file-edit-submit').click(function () {
    disable($(this));
    editSubmit();
});
function editSubmit() {
    {% if filetype == 'Sf' %}
    var content = $('#sf').html();
    {% else %}
    var content = editor.getValue();
    {% endif %}

    $.ajax({
        type: "POST",
        url: '{{ SITE_ROOT }}repo/{{repo.id}}/file/edit/?p={{path|urlencode}}&head={{head_id}}',
        dataType: 'json',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        beforeSend: prepareCSRFToken,
        data: {content: content, encoding: '{{ encoding }}'},
        success: function(data) {
            location.href = $('#file-edit-cancel').attr('href');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            var jsonVal = jQuery.parseJSON(xhr.responseText);
            feedback(jsonVal['error'], 'error');
            if (jsonVal['op'] == 'decrypt') {
                $('#repo-decrypt-form').modal();
                $('#simplemodal-container').css({'height':'auto'});
            }
            enable($('#file-edit-submit'));
        }
    });
}
{% endif %}

{% if op == 'decrypt' %}
$('#repo-decrypt-form').modal();
$('#simplemodal-container').css({'height':'auto'});
{% endif %}

$('#repo-decrypt-form').submit(function() {
    var pwd_input = $(this).find('input[name="password"]');
    var pwd = $.trim(pwd_input.val());
    var err = $(this).find('.error');
    if (!pwd) {
        err.html('{% trans "Password is required." %}');
    } else if (pwd.length < 3 || pwd.length > 15) {
        err.html('{% trans "Password should be 3 to 15 characters." %}');
    } else {
        $.ajax({
            url: '{% url repo_set_password %}',
            type: 'POST',
            dataType: 'json',
            cache: 'false',
            beforeSend: prepareCSRFToken,
            data: {
                repo_id: '{{repo.id}}',
                password: pwd,
                username: '{{request.user.username}}'
            },  
            success: function(data) {
                if (data['success']) {
                    $.modal.close();
                    {% if file_content != None %}
                    editSubmit();
                    {% endif %}
                    {% if op == 'decrypt' %}
                    location.reload(true);
                    {% endif %}
                } else {
                    pwd_input.val('');
                    err.html(data['error']);
                }   
            },  
            error: function(data, textStatus, jqXHR) {
                err.html('{% trans "Unknown error." %}'); 
            }   
        }); 
    }
    return false;
});
</script>
{% endblock %}