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

{% block sub_title %}{{filename}} - {% endblock %}

{% 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">
            {% if not repo.encrypted %}
            <button data-link="{{ file_shared_link }}" data-token="{{ fileshare.token }}" id="share"><span class="sf-icon-share"></span>{% trans "Share"%}</button>
            {% endif %}
            {% if is_starred %}
            <button id="star" data-status="starred"><span class="icon-star"></span><span class="text">{% trans "Unstar"%}</span></button>
            {% else %}
            <button id="star" data-status="unstarred"><span class="icon-star"></span><span class="text">{% trans "Star"%}</span></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|id_or_email %}" 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|slice:":6" %}
                <a href="{% url 'user_profile' user|id_or_email %}" title="{{ user|email2nickname}}">{% avatar user 16 %}</a>
                {% endfor %}
            </div>

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

            {% if request.user.is_authenticated %}
                {% block edit_file %}
                {% endblock %}
            {% endif %}

            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ filename|urlencode }}&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>

    {% include "snippets/file_share_popup.html" %} 

    {% with attach_type='file' %}
    {% include "snippets/group_recommend_form.html" %}
    {% endwith %}

{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('#share').click(function() {
    var op = $(this), name = '{{ filename }}',
        aj_urls = { 'link': '{% url 'get_shared_link' %}?repo_id={{ repo.id }}&p={{path|urlencode}}' },
        type = 'f', cur_path = '{{path}}'.substr(0, '{{path}}'.length - name.length);
    showSharePopup(op, name, aj_urls, type, cur_path);
    return false;
});
$('#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 path = '{{path}}';
    var status = star_btn.data('status'), ajax_url;
    if (status == 'unstarred') {
        ajax_url = '{% url 'repo_star_file' repo.id %}?file=' + e(path);
    } else {
        ajax_url = '{% url 'repo_unstar_file' repo.id %}?file=' + e(path);
    }
    
    $.ajax({
        url: ajax_url,
        cache: false,
        dataType: 'json',
        success:function(data) {
            if (data['success']) {
                if (status == 'starred') {
                    feedback('{% trans "Unstarred successfully" %}', 'success');
                    star_btn.data('status', 'unstarred');
                    star_btn.children('.text').html("{% trans "Star" %}");
                } else {
                    feedback('{% trans "Starred successfully" %}', 'success');
                    star_btn.data('status', 'starred');
                    star_btn.children('.text').html("{% 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');
    }
);

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

$('#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 %}
