{% load filesizeformat %}

<div class="file-uploader paper-dropzone file-uploader--{{ widget.value|yesno:"ready,empty" }}"
     data-upload-url="{{ upload_url }}"
     data-change-url="{{ change_url }}"
     data-delete-url="{{ delete_url }}"
     data-paper-content-type="{{ content_type.pk }}"
     data-paper-owner-app-label="{{ owner_app_label }}"
     data-paper-owner-model-name="{{ owner_model_name }}"
     data-paper-owner-field-name="{{ owner_fieldname }}"
     data-configuration='{{ configuration|safe }}'>
  <input type="hidden" class="file-uploader__input"
         name="{{ widget.name }}"
         value="{{ widget.value|default:"" }}"
         {% include "django/forms/widgets/attrs.html" %}/>

  <div class="paper-input-group input-group input-group-lg">
    <div class="input-group-prepend">
      <button type="button" class="file-uploader__upload-button input-group-text"
         data-toggle="tooltip" data-placement="top" data-trigger="hover"
         data-html="true" title="{{ _("Select file") }}">
        <i class="fa fa-fw fa-folder-open"></i>
      </button>
    </div>

    <div class="form-control">
      <span class="file-name">
        {% if instance %}{{ instance.display_name }}{% endif %}
      </span>
      <span class="file-info text-muted">
        {% if instance %}
          ({{ instance.extension }}, {{ instance.size|filesizeformat }})
        {% endif %}
      </span>
      <div class="progress">
        <div class="progress-bar progress-bar-animated progress-bar-striped"
             role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
    </div>

    <div class="input-group-append">
      <div class="file-uploader__ready-buttons">
        <a {% if instance %}href="{{ instance.url }}"{% endif %}
           target="_blank" tabindex="0"
           class="file-uploader__view-button input-group-text"
           data-toggle="tooltip" data-placement="top" data-trigger="hover"
           data-html="true" title="{{ _("Open file") }}">
          <i class="fa fa-fw fa-eye"></i>
        </a>

        <button type="button" tabindex="0"
                class="file-uploader__change-button input-group-text"
                data-toggle="tooltip" data-placement="top" data-trigger="hover"
                data-html="true" title="{{ _("Edit file") }}">
          <i class="fa fa-fw fa-pencil"></i>
        </button>

        <button type="button" tabindex="0"
                class="file-uploader__delete-button input-group-text input-group-text--danger"
                data-toggle="tooltip" data-placement="top" data-trigger="hover"
                data-html="true" title="{{ _("Delete file") }}">
          <i class="fa fa-fw fa-trash"></i>
        </button>
      </div>
      <div class="file-uploader__loading-buttons">
        <button type="button" tabindex="0"
                class="file-uploader__cancel-button input-group-text input-group-text--danger"
                data-toggle="tooltip" data-placement="top" data-trigger="hover"
                data-html="true" title="{{ _("Cancel upload") }}">
          <i class="fa fa-fw fa-times"></i>
        </button>
      </div>
    </div>
  </div>

  {% if limitations %}
    <div class="image-uploader__limitations small text-muted mt-2">
      <span>{{ _("Please consider the following limitations") }}:</span>
      <ul class="pl-3 mb-0">
        {% for label, limits in limitations %}
          <li>{{ label }}: <em>{{ limits }}</em></li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="paper-dropzone__overlay">
    <div class="paper-dropzone__hint">
      <i class="fa fa-fw fa-upload"></i>
      {{ _("Drop files here to send") }}
    </div>
  </div>
</div>
