{% extends base_template %}
{% load seahub_tags avatar_tags i18n %}
{% load url from future %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
<style type="text/css">                                                
#footer { display:none; }                                              
</style>
{% endblock %}

{% block main_panel %}
    <div id="view-hd">
        <h2>{{ filename }}</h2>
    </div>

    <div id="view-path-op" class="w100 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 %}
                {{ name }}
            {% endif %}
        {% endfor %}
        </p>

        <div class="file-op fright">
            <input id="shared-link" class="hide" type="text" readonly="readonly" value="{{ file_shared_link }}" />
            <button data="{% url 'get_shared_link' %}?repo_id={{ repo.id }}&p={{ path|urlencode }}" id="get-shared-link" class="hide">{% trans "Share link"%}</button>
            <button id="send-shared-link" class="hide">{% trans "Send"%}</button>
            <button data="{% url 'remove_shared_link' %}?t={{ fileshare.token }}" id="rm-shared-link" class="hide">{% trans "Delete"%}</button>
            {% if is_starred %}
            <button id="star" data-status="starred">{% trans "Unstar"%}</button>
            {% else %}
            <button id="star" data-status="unstarred">{% trans "Star"%}</button>
            {% endif %}
        </div>
    </div>

    <div id="file">
        <div id="file-op">
            <div class="commit fleft">
                {% if latest_contributor %}
                {% avatar latest_contributor 20 %} <a href="{% url 'user_profile' latest_contributor %}" class="name">{{ latest_contributor|email2nickname }}</a>
                {% endif %}
                {% if last_modified %}
                <span class="time">{{ last_modified|translate_seahub_time}}</span>
                {% endif %}

                {% block update_detail %} 
                {% if last_commit_id %}
                  <span>{% trans "updated this file"%}.</span>
                {% endif %}
                {% endblock %}

                <span class="contributors">{% blocktrans count counter=contributors|length %}one contributor{% plural %} {{ counter }} contributors {% endblocktrans %}</span>
                {% for user in contributors %}
                <a href="{% url 'user_profile' user %}" title="{{ user|email2nickname}}">{% avatar user 16 %}</a>
                {% endfor %}
            </div>

            {% if user_perm == 'rw' %}
            <button data-url="{% url 'file_revisions' repo.id %}?p={{ path }}" class="history">{% trans "History"%}</button>
            {% endif %}

            {% if request.user.is_authenticated %}
                {% block open_local %}            
                <button id="open-local" data="{{path}}{{dirent.obj_name}}">{% trans "Open local file"%}</button>
                {% endblock %}                

                {% block edit_file %}
                {% endblock %}
            {% endif %}

            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ filename }}&op=download" id="download">{% trans "Download"%}</button>
        </div>

        <div id="file-view">
          {% if err %}
          <div id="file-view-tip">
            <p class="error">{{ err }}</p>
          </div>
          {% else %}
          {% block file_view %}{% endblock %}
          {% endif %}
        </div>
    </div>

    <form id="link-send-form" action="" method="post" class="hide">
        <h3>{% trans "Send Link" %}</h3>
        <label>{% trans "Send to:"%}</label><br />
        <textarea id="link-send-input" name="email" placeholder="{% trans "Emails, Seperated by ','"%}"></textarea><br />
        <input type="hidden" name="file_shared_link" value="{{ file_shared_link }}" />
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
        <p class="error hide"></p>
        <p id="sending" class="hide">{% trans "Sending..."%}</p>        
    </form>

    <div id="open-local-feedback" class="hide">
        <p id="open-local-handling-tip">{% trans "Processing..."%}</p>
        <p id="open-local-error" class="error"></p>
        <div id="redirect-download" class="hide">
            <p class="error">{% trans "You have not downloaded " %}"{{ repo.props.name }}"{% trans "." %} </p>
            <button data="{{ SITE_ROOT }}download/repo/?repo_id={{ repo.id }}" id="download-repo">{% trans "Click to download"%}</button>
        </div>
    </div>

    <iframe class="hide" id="open-local-iframe"></iframe>
    
    {% with attach_type='file' %}
    {% include "snippets/group_recommend_form.html" %}
    {% endwith %}

{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('#view-original, #download').click(function() {
    window.open($(this).attr('data'));
});

$('#edit').click(function() {
    location.href = $(this).attr('data');
});

//share link
{% include "snippets/shared_link_js.html" %}

//star
$('#star').click(function() {
    var star_btn = $(this);
    disable(star_btn);
    var state = star_btn.data('status');
    $.ajax({
        url: '{% url 'repo_star_file' repo.id %}',
        type: 'POST',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        beforeSend: prepareCSRFToken,
        dataType: 'json',
        data: {
            path: '{{ path }}',
            state: state,
            org_id: {% if org %} {{ org.org_id }} {% else %} -1 {% endif %}
        },
        success:function(data) {
            if (data['success']) {
                if (state == 'starred') {
                    feedback('{% trans "Unstarred successfully" %}', 'success');
                    star_btn.data('status', 'unstarred').text('{% trans "Star" %}');
                } else {
                    feedback('{% trans "Starred successfully" %}', 'success');
                    star_btn.data('status', 'starred').text('{% trans "Unstar" %}');
                }
                enable(star_btn);
            }
        },
        error:function(xhr, textStatus, errorThrown) {
            if (xhr.responseText) {
                feedback(jQuery.parseJSON(xhr.responseText).error, 'error');
            } else {
                feedback('{% trans "Failed. Please check the network." %}', 'error');
            }
            enable(star_btn);
        }
   });
})
.hover(
    function() {
        $(this).css('background-color', '#fff');
    },
    function() {
        $(this).css('background-color', '#efefef');
    }
);

//open local
function send_open_local_file_request(path) {
    var callback = 'xx';
    $.ajax({
        url: '{{ applet_root }}/open-local-file/?repo_id={{ repo.id }}&commit_id={{current_commit.id}}&path=' + e(path) + '&callback=' + callback,
        dataType: 'jsonp',
        jsonpCallback: callback,
        crossDomain: true,
        success: function(data) {
            $('#open-local-handling-tip').addClass('hide');
            if (data['exists'] === false) { // repo doesn't exist on local machine
                $('#open-local-error').addClass('hide');
                $('#redirect-download').removeClass('hide');
                
            } else if (data['no_assoc'] === true) { // no application to open the file
                $('#open-local-error').html('{% trans "Failed to find an application to open the file. Seafile will open the folder." %}');

            } else if (data['outdated'] === true) { // local repo not in sync yet
                if (data['auto-sync'] === false) {
                    $('#open-local-error').html('{% trans "The file is not synchronized, you can synchronize it manually." %}');
                } else {
                    $('#open-local-error').html('{% trans "The file is not synchronized, please retry later." %}');
                }

            } else if (data['error']) { // other error
                $('#open-local-error').html('{% trans "An error occurred when open the local file." %}');

            } else { // open file successfully
                $('#open-local-handling-tip').removeClass('hide');
                setTimeout(function() { $.modal.close(); }, 1500);
            }
        }
    });
}
$('#download-repo').click(function() {
    location.href = $(this).attr('data');
});

$('#open-local').click(function () {
    var path = $(this).attr('data');
    var local_applet_running = false;
    $('#open-local-feedback').modal({appendTo: '#main', containerCss: { width: 300}});
    $('#simplemodal-container').css('height', 'auto');

    $.ajax({
        url: '{{ applet_root }}/seafile_rpc_version/',
        dataType: 'jsonp',
        jsonpCallback: 'xx',
        crossDomain: true,
        success: function(version) {
            local_applet_running = true;
            if (version < 1) {
                $('#open-local-handling-tip').addClass('hide');
                $('#open-local-error').html('{% trans 'You are running an old version of Seafile client, please <a target="_blank">upgrade</a> it.' %}');
                $('#open-local-error a').attr('href', 'http://www.seafile.com/');
            } else {
                send_open_local_file_request(path);
            }
        }
    });

    var url = '{{ applet_root }}/open-local-file/?repo_id={{ repo.id }}&commit_id={{current_commit.id}}&path=' + e(path) + '&callback=xx';
    var url_short = url.slice(0, 40) + '...';

    setTimeout(function() {
        if (!local_applet_running) {
            $('#open-local-handling-tip').addClass('hide');
            $('#open-local-error').html("{% trans 'No running Seafile client is detected. If you are sure Seafile client is running, click the following link to open the local file:' %}" +  '<br/><a href="' + url + '" target="open-local-iframe">' + url_short + '</a>');
        }
      }, 2000);
});

$('#file-op .history').click(function () {
    location.href = $(this).data('url');
});

//bottom bar
{% include "snippets/bottom_bar.html" %}
$('#main-panel').css('margin-bottom',0);
</script>
{% endblock %}