{% extends "base.html" %}
{% load seahub_tags i18n %}

{% block viewport %}{% endblock %}

{% block extra_style %}
{% include 'snippets/file_view_style.html' %}
<style type="text/css">
{% if not permissions.can_download %}
body {
    user-select:none;
}
@media print {
    html {
        display:none;
    }
}
{% endif %}
</style>
{% endblock %}

{% block main_content %}
    {% if traffic_over_limit %}
        <p class="strip-tip">{% trans "File download is disabled: the share link traffic of owner is used up." %}</p>
    {% endif %}
    <div id="shared-file-view-hd" class="ovhd">
        <div class="fleft js-file-info">
            <h2 class="file-view-hd ellipsis no-bold" title="{{ file_name }}">{{ file_name }}</h2>
            {% if zipped %}
            <p class="cur-path ellipsis">
              {% trans "Current path: "%}
              {% for name, link in zipped %}
                {% if not forloop.last %}
                <a href="{{ SITE_ROOT }}d/{{ token }}/?p={{ link|urlencode }}">{{ name }}</a> /
                {% else %}
                {{ name }}
                {% endif %}
              {% endfor %}
              </p>
            {% else %}
            <p class="share-by ellipsis">{% trans "Shared by: " %}{{ shared_by|email2nickname }}</p>
            {% endif %}
        </div>

        <div class="fright js-file-op">
            {% if permissions.can_download %}
            {% if request.user.is_authenticated and request.user.username != shared_by %}
              {% if save_to_link %}
              <button data="{{save_to_link}}" id="save" class="shared-file-op-btn">{% trans "Save to..."%}</button>
              {% endif %}
            {% endif %}
            {% if not traffic_over_limit %}
              <a href="{% if from_shared_dir %}?p={{path|urlencode}}&dl=1{% else %}?dl=1{% endif %}" class="obv-btn shared-file-op-btn">{% trans "Download" %} ({{file_size|filesizeformat}})</a>
            {% endif %}
            {% endif %}
        </div>
    </div>

    {% include 'snippets/file_content_html.html' %}

    {% if permissions.can_download %}
    <form id="file-save-form" action="{{save_to_link}}" method="post" class="file-choose-form hide">{% csrf_token %}
        <h3>{% trans "Save To:" %}</h3>
        <div class="dir-tree-cont">
            <div id="repos-dirs">
                <span class="loading-icon loading-tip"></span>
            </div>
        </div>
        <input type="hidden" name="s_token" value="{{shared_token}}" />
        <input type="hidden" name="dst_repo" value="" />
        <input type="hidden" name="dst_path" value="" />
        <p class="error hide">{% trans "Please click and choose a directory." %}</p>
        <button type="submit" class="submit">{% trans "Submit" %}</button>
        <button class="simplemodal-close">{% trans "Cancel" %}</button>
    </form>
    {% endif %}

{% endblock %}

{% block extra_script %}
{% include "snippets/file_view_js.html" %}
<script type="text/javascript">
$(function() {
    var dld_btn = $('.obv-btn').clone();
    dld_btn.html("{% trans "Download" %}").attr('class', 'sf-btn-link big-btn-link');
    $('#file-view-tip').append(dld_btn);
});
$(function () {
    var $hd = $('#shared-file-view-hd');
    $('.js-file-info', $hd).css({'max-width': $hd.width() - $('.js-file-op', $hd).outerWidth(true) - 10});
});

{% if filetype == 'PDF' and use_pdfjs and not err %}
{% elif filetype == 'Image' and not err %}
{% else %}
function setFileViewAreaHeight() {
    $('body').css({'overflow':'auto'});
    var file_view = $('#file-view').css({'height': 'auto'});
    if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
        file_view.outerHeight($(window).height() - file_view.offset().top);
    }
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
{% endif %}

{% if request.user.is_authenticated and request.user.username != shared_by and permissions.can_download %}
$('#save').click(function() {
    var $form = $('#file-save-form');
    $form.modal({appendTo:'#main', autoResize:true, focus:false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
    $.ajax({
        url: '{% url 'unenc_rw_repos' %}',
        cache: false,
        dataType: 'json',
        success: function(data) {
            var all_repos = [], repo;
            for (var i = 0, len = data.length; i < len; i++) {
                repo = data[i];
                all_repos.push({
                    'text': HTMLescape(repo.name),
                    'data': {'repo_id': repo.id, 'path': '/'},
                    'children': true
                });
            }
            FileTree.renderDirTree($('#repos-dirs').data('site_root', '{{SITE_ROOT}}'), $form, all_repos);
        }
    });
});
$('#file-save-form').submit(function() {
    var $form = $(this),
        dst_repo = $('[name="dst_repo"]', $form).val(),
        dst_path = $('[name="dst_path"]', $form).val();

    if (!$.trim(dst_repo) || !$.trim(dst_path)) {
        $('.error', $form).removeClass('hide');
        return false;
    }
});
{% endif %}
{% include "snippets/file_content_js.html" %}

{% if filetype == 'Image' and not err %}
    {% if enable_thumbnail and fileext != 'gif' %}
        {% if from_shared_dir %}
        var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'
        $('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/{{ thumbnail_size_for_original }}' + encoded_path);
        {% else %}
        $('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/{{ thumbnail_size_for_original }}/' + encodeURIComponent('{{file_name|escapejs}}'));
        {% endif %}
        $('#image-view').on('error', function() { // fail to load thumbnail
            $(this).attr('src', '{{ raw_path|escapejs }}');
        })
    {% else %}
        $('#image-view').attr('src', '{{ raw_path|escapejs }}');
    {% endif %}
{% endif %}

{% if not permissions.can_download %}
$(document)
.contextmenu(function() {
    return false;
})
.bind('keydown', function(e) {
    // prevent ctrl + s/p/a/c, i.e, 'save', 'print', 'select all', 'copy'
    if (e.ctrlKey && (e.which == 83 || e.which == 80 || e.which == 65 || e.which == 67)) {
        e.preventDefault();
        return false;
    }
});
{% endif %}
</script>
{% endblock %}