{% load i18n %}

<div class="imagewidget {% if not value %}empty{% endif %}">
  <div class="btn fileinput-button">

    {# Translators: image replace label #}
    <span class="image-action replace-image">{% trans "Replace image" %}</span>
    {# Translators: image replace label #}
    <span class="image-action select-image">{% trans "Select image" %}</span>
    
    <input type="file"
           class="field"
           name="{{ name }}_upload"
           {% if show_progress %}
           data-progress="#progress_{{ name }}"
           {% endif %}
           data-attachmenttype="{{ attachment_type }}"
           data-valuefield="#id_{{ name }}"
           data-target="#uploads_{{ name }}" />
    
    <input id="id_{{ name }}" name="{{ name }}" type="hidden" 
           value="{{ value.pk }}" />
  </div>

  <a href="#" class="image-action delete-image" data-target="#id_{{ name }}">
    {# Translators: image remove label #}
    {% trans "Remove image" %}
  </a>

  {% if show_progress %}
  <div id="progress_{{ name }}" 
       class="progress progress-info">
    <div class="bar"></div>
  </div>
  {% endif %}

  {% if default_image %}
  <img class="default-image" src="{{ default_image }}" />
  {% endif %}

  <div class="uploads" id="uploads_{{ name }}">
    {% if image_url %}
    <img src="{{ image_url }}" />
    {% endif %}
  </div>

</div>
