{% extends "admin/base_site.html" %}

<!-- LOADING -->
{% load static i18n fb_tags fb_versions %}

<!-- STYLESHEETS -->
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "filebrowser/css/filebrowser.css" %}" />
{% endblock %}

<!-- JAVASCRIPTS -->
{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript">
    (function($){
        $(document).ready(function() {
            $("div#grp-content-container .grp-collapse").grp_collapsible({
                on_init: function(elem, options) {
                    // open collapse (and all collapse parents) in case of errors
                    if (elem.find("ul.grp-errorlist").length > 0) {
                        elem.removeClass("grp-closed")
                            .addClass("grp-open");
                        elem.parents(".grp-collapse")
                            .removeClass("grp-closed")
                            .addClass("grp-open");
                    }
                }
            });
            // remove edit module if no actions are given
            if ($("select#id_custom_action").find("option").length <= 1) {
                $("fieldset#fieldset_edit").hide();
            }
        });
    })(grp.jQuery);
    </script>
    {{ media }}
{% endblock %}

<!-- COLTYPE/BODYCLASS -->
{% block bodyclass %}grp-change-form grp-filebrowser{% if query.pop %} grp-popup{% endif %}{% endblock %}
{% block content-class %}{% endblock %}

<!-- BREADCRBUMBS -->
{% block breadcrumbs %}{% include "filebrowser/include/breadcrumbs.html" %}{% endblock %}

<!-- CONTENT -->
{% block content %}
<div id="grp-content-container">
    <form action="{% query_string "" "filter_date,filter_type,q,p" %}" method="post">{% csrf_token %}
        {% if form.errors %}<p class="errornote">{% trans 'Please correct the following errors.' %}</p>{% endif %}
        <fieldset class="grp-module">
            <div class="grp-row {% if form.name.errors %}grp-errors{% endif %}">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label class="required" for="id_name">{{ form.name.label }}</label></div>
                    <div class="c-2">
                        {{ form.name }}
                        {% if form.name.errors %}<ul class="errorlist">{{ form.name.errors }}</ul>{% endif %}
                        {% if form.name.help_text %}<p class="grp-help">{{ form.name.help_text|safe }}</p>{% endif %}
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="grp-module grp-collapse grp-open" id="fieldset_edit">
            <h2 class="grp-collapse-handler">{% trans "Edit" %}</h2>
            <div class="grp-row {% if form.custom_action.errors %}grp-errors{% endif %}">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label class="required" for="id_custom_action">{{ form.custom_action.label }}</label></div>
                    <div class="c-2">
                        {{ form.custom_action }}
                        {% if form.custom_action.errors %}<ul class="errorlist">{{ form.custom_action.errors }}</ul>{% endif %}
                        {% if form.custom_action.help_text %}<p class="help">{{ form.custom_action.help_text|safe }}</p>{% endif %}
                    </div>
                </div>
            </div>
        </fieldset>
        {% if fileobject.filetype == "Folder" %}
        <fieldset class="grp-module grp-collapse grp-open">
            <h2 class="grp-collapse-handler">{% trans "Folder Information" %}</h2>
            <div class="grp-row">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label>{% trans "Date" %}</label></div>
                    <div class="c-2">
                        <p class="grp-text">
                            {{ fileobject.datetime|date:"N j, Y" }}
                        </p>
                    </div>
                </div>
            </div>
        </fieldset>
        {% endif %}
        {% if fileobject.filetype != "Folder" %}
        <fieldset class="grp-module grp-collapse grp-open">
            <h2 class="grp-collapse-handler">{% trans "File Information" %}</h2>
            <div class="grp-row">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label>{% trans "URL" %}</label></div>
                    <div class="c-2">
                        <p class="grp-text">
                            <a href="{{ fileobject.url }}">{{ fileobject.url }}</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="grp-row">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label>{% trans "Filesize" %}</label></div>
                    <div class="c-2">
                        <p class="grp-text">
                            {{ fileobject.filesize|filesizeformat }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="grp-row">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label>{% trans "Date" %}</label></div>
                    <div class="c-2">
                        <p class="grp-text">
                            {{ fileobject.datetime|date:"N j, Y" }}
                        </p>
                    </div>
                </div>
            </div>
            {% if fileobject.filetype == "Image" %}
                <div class="grp-row">
                    <div class="l-2c-fluid l-d-4">
                        <div class="c-1"><label>{% trans "Size" %}</label></div>
                        <div class="c-2">
                            <p class="grp-text">
                                {{ fileobject.width }} x {{ fileobject.height }} px
                            </p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </fieldset>
        {% endif %}
        {% if fileobject.filetype == "Image" %}
        <fieldset class="grp-module grp-collapse grp-open">
            <h2 class="grp-collapse-handler">{% trans "Image Versions" %}</h2>
            {% if settings_var.ADMIN_THUMBNAIL %}
            <div class="grp-row">
                <div class="l-2c-fluid l-d-4">
                    <div class="c-1"><label>{% trans "Thumbnail" %}</label></div>
                    <div class="c-2">
                        <img src="{% version fileobject.path settings_var.ADMIN_THUMBNAIL %}" title="{% trans 'View Image' %}" />
                    </div>
                </div>
            </div>
            {% endif %}
            {% if settings_var.ADMIN_VERSIONS %}
                {% for version in settings_var.ADMIN_VERSIONS %}
                    {% version fileobject version as image_version %}
                    {% version_setting version %}
                    <div class="grp-row">
                        <div class="l-2c-fluid l-d-4">
                            <div class="c-1"><label>{{ version_setting.verbose_name }}</label></div>
                            <div class="c-2">
                                <img src="{{ image_version.url }}" />
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </fieldset>
        {% endif %}
        <footer class="grp-module grp-submit-row grp-fixed-footer">
            <header style="display:none"><h1>Submit Options</h1></header>
            <ul>
                <li class="grp-float-left"><a href="{% url 'filebrowser:fb_delete_confirm' %}{% query_string %}" class="grp-button grp-delete-link">{% trans "Delete" %}</a></li>
                <li><input type="submit" value="{% trans 'Save' %}" class="grp-button grp-default" /></li>
                <li><input type="submit" value="{% trans 'Save and continue editing' %}" class="grp-button" name="_continue" /></li>
            </ul>
        </footer>
    </form>
</div>
{% endblock %}
