{% extends "shatailadmin/base.html" %} {% load shatailimages_tags shatailadmin_tags i18n l10n %} {% block titletag %}{% blocktrans trimmed with title=image.title %}Editing image {{ title }}{% endblocktrans %}{% endblock %} {% block extra_css %} {{ block.super
}} {{ form.media.css }}

<!-- Focal point chooser -->
<link rel="stylesheet" href="{% versioned_static 'shatailimages/css/vendor/jquery.Jcrop.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% versioned_static 'shatailimages/css/focal-point-chooser.css' %}" type="text/css"> {% endblock %} {% block extra_js %} {{ block.super }} {{ form.media.js }} {% url 'shatailadmin_tag_autocomplete' as autocomplete_url %}
<script>
    $(function() {
        $('#id_tags').tagit({
            autocomplete: {
                source: "{{ autocomplete_url|addslashes }}"
            }
        });
    });
</script>

<!-- Focal point chooser -->
<script src="{% versioned_static 'shatailadmin/js/vendor/jquery.ba-throttle-debounce.min.js' %}"></script>
<script src="{% versioned_static 'shatailimages/js/vendor/jquery.Jcrop.min.js' %}"></script>
<script src="{% versioned_static 'shatailimages/js/focal-point-chooser.js' %}"></script>
{% endblock %} {% block content %} {% trans "Editing" as editing_str %} {% include "shatailadmin/shared/header.html" with title=editing_str subtitle=image.title icon="image" %} {% include "shatailadmin/shared/non_field_errors.html" %}

<form action="{% url 'shatailimages:edit' image.id %}" method="POST" enctype="multipart/form-data" novalidate>
    {% csrf_token %}
    <input type="hidden" value="{{ next }}" name="next">
    <div class="row row-flush nice-padding">
        <div class="col6">
            <ul class="fields">
                {% for field in form %} {% if field.name == 'file' %} {% include "shatailimages/images/_file_field_as_li.html" with li_classes="label-above" %} {% elif field.is_hidden %} {{ field }} {% else %} {% include "shatailadmin/shared/field_as_li.html" with li_classes="label-above"
                %} {% endif %} {% endfor %}
            </ul>
            <div class="w-hidden sm:w-block">
                <input type="submit" value="{% trans 'Save' %}" class="button" /> {% if user_can_delete %}
                <a href="{% url 'shatailimages:delete' image.id %}{% if next %}?next={{ next|urlencode }}{% endif %}" class="button button-secondary no">{% trans "Delete image" %}</a> {% endif %}
            </div>
        </div>

        <div class="col6">
            {% image image max-800x600 as rendition %}

            <div class="focal-point-chooser" style="max-width: {{ rendition.width }}px; max-height: {{ rendition.height }}px;" data-focal-point-x="{{ image.focal_point_x|default_if_none:'' }}" data-focal-point-y="{{ image.focal_point_y|default_if_none:'' }}" data-focal-point-width="{{ image.focal_point_width|default_if_none:'' }}"
                data-focal-point-height="{{ image.focal_point_height|default_if_none:'' }}">

                <img {{ rendition.attrs }} data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
                <div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
            </div>

            {% if url_generator_enabled %}
            <a href="{% url 'shatailimages:url_generator' image.id %}" class="button bicolor button--icon">{% icon name="link" wrapped=1 %}{% trans "URL Generator" %}</a>
            <hr /> {% endif %}

            <div class="row">
                <div class="col8 divider-after">
                    <h2 class="label no-float">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
                    <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>

                    <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
                </div>
                <div class="col4">
                    {% image image original as original_image %}

                    <dl>
                        <dt>{% trans "Max dimensions" %}</dt>
                        <dd>{{ original_image.width }}x{{ original_image.height }}</dd>
                        <dt>{% trans "Filesize" %}</dt>
                        <dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>

                        {% usage_count_enabled as uc_enabled %} {% if uc_enabled %}
                        <dt>{% trans "Usage" %}</dt>
                        <dd>
                            <a href="{{ image.usage_url }}">{% blocktrans trimmed count usage_count=image.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
                        </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-flush nice-padding sm:!w-hidden">
        <div class="col5">
            <input type="submit" value="{% trans 'Save' %}" class="button" /> {% if user_can_delete %}
            <a href="{% url 'shatailimages:delete' image.id %}{% if next %}?next={{ next }}{% endif %}" class="button button-secondary no">{% trans "Delete image" %}</a> {% endif %}
        </div>
    </div>
</form>
{% endblock %}