{% load i18n %}
{% load url from future %}
{% comment %}
content of files that can be viewed online shows here.
For details please refer to 'snippets/file_content_js.html'.
{% endcomment %}
<div id="file-view">
    {% include 'snippets/file_encoding.html' %}
    {% if not err %}
        {% if filetype == 'Text' or filetype == 'Sf' or filetype == 'Markdown' %}
            {% ifnotequal file_content None %}
                {% if filetype == 'Text' %}
                <textarea id="docu-view" class="vh">{{ file_content|escape }}</textarea>
                {% endif %}

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

                {% if filetype == 'Markdown' %}
                <div id="md-view" class="article"></div>
                {% endif %}
            {% endifnotequal %}
        {% endif %}

        {% if filetype == 'Image' %}
            {% if img_prev or img_next %}
            <div id="img-prev-next">
                {% if img_prev %}
                <a href="?p={{img_prev|urlencode}}" id="img-prev" title="{% trans 'you can also press ← ' %}">{% trans "prev" %}</a>
                {% endif %}
                {% if img_prev and img_next %}
                <span>/</span>
                {% endif %}
                {% if img_next %}
                <a href="?p={{img_next|urlencode}}" id="img-next" title="{% trans 'you can also press → ' %}">{% trans "next" %}</a>
                {% endif %}
            </div>
            {% endif %}
            <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" class="vh" />
        {% endif %}
        
        {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} 
            {% include 'snippets/office_convert_html.html' %}
        {% endif %}

        {% if filetype == 'SpreadSheet' %}
            {% include 'snippets/spreadsheet_convert_html.html' %}
        {% endif %}

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