{% load i18n smart_image %}{% spaceless %}
<div class="fileinputbutton{% if widget.is_initial %} fileinputbutton--has-preview{% endif %}{% if widget.is_initial and not widget.required %} fileinputbutton--clearable{% endif %}">
    {% if widget.is_initial %}
        <div class="fileinputbutton__initial">
            <div class="fileinputbutton__preview">
                <a href="{{ widget.value.url }}"
                    title="{{ widget.initial_text }}: {{ widget.value }}"
                    target="_blank">
                    {% media_thumb widget.value "60x60" crop="center" as thumb %}
                    <img src="{{ thumb.url }}" alt="{{ widget.value }}">
                </a>
            </div>
        </div>
    {% endif %}

    <div class="fileinputbutton__controls">
        {% if widget.is_initial and not widget.required %}
            <div class="fileinputbutton__clear">
                <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
                <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
            </div>
        {% endif %}

        <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>

        <label for="{{ widget.attrs.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
            </svg>
            <span>
                {% if widget.is_initial %}
                    {% trans "Choose a new file" %}
                {% else %}
                    {% trans "Choose a file" %}
                {% endif %}
                &hellip;
            </span>
        </label>
    </div>
</div>
{% endspaceless %}
