{% extends "admin/change_form.html" %}
{% load static %}

{% block after_field_sets %}
  {% if original.is_image %}
    {% include 'admin/media/includes/image_editor.html' %}
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ block.super }}

  {% if original.is_image %}
    <!-- Instantiate the image editor widget -->
    <link type="text/css" rel="stylesheet" href="{% static 'cms/js/imgeditor/image-editor.css' %}">
    <script type="text/javascript" src="{% static 'cms/js/imgeditor/image-editor.js' %}"></script>
  {% endif %}

  {% if is_popup %}
    <style>
      body {
        background-color: #FFF;
      }
    </style>
  {% endif %}

  {% if not original %}
    {# Prepopulate the title with the name of the file, for new files. #}
    <script>
      window.addEventListener('DOMContentLoaded', function () {
        var fileInput = document.getElementById('id_file');
        var titleInput = document.getElementById('id_title');
        fileInput.addEventListener('change', function (event) {
          var value = event.target.value;
          // Don't overwrite a title.
          if (titleInput.value || !value) {
            return
          }
          // Trim to just the filename, minus path.
          var filename = value.split(/(\\|\/)/g).pop();
          // Trim off the file extension.
          filename = filename.replace(/\.[^/.]+$/, '');
          if (filename) {
            titleInput.value = filename
          }
        });
      });
    </script>
  {% endif %}
{% endblock %}