{% load i18n %}
{% load static %}

<div x-data="{clearCheckboxChecked: false, hasFile: false, showPlaceholder: true }">
    <div class="field has-addons mb-0">
        <div class="control is-flex-grow-1 m-0">
            <div class="file is-fullwidth">
                <label class="file-label">
                    <input class="file-input"
                           x-ref="{{ widget.name }}_input"
                           @change="if($event.target.files.length > 0) {hasFile = true; $refs.newFileName.textContent = $event.target.files[0].name; showPlaceholder = false; previewUrl = URL.createObjectURL($event.target.files[0]); $refs.newFilePreview.src = previewUrl;} else {hasFile = false; $refs.newFileName.textContent = ''; showPlaceholder = true;}; {% if widget.is_initial and not widget.required %}clearCheckboxChecked = false; $refs.clearCheckbox.checked = clearCheckboxChecked;{% endif %}"
                           type="{{ widget.type }}"
                           name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}
                    >
                    <span class="file-cta is-flex-grow-1"
                          x-bind:style="hasFile ? 'border: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;' : 'border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; {% if widget.is_initial %}border-top-right-radius: 0;{% endif %}'"
                    >
                        <span class="file-icon"><i class="fas fa-upload"></i></span>
                        <span class="file-label">{% translate 'Select' %}</span>
                    </span>
                </label>
            </div>
        </div>
        <div class="control is-flex-grow-1" x-show="hasFile">
            <button class="button is-light is-fullwidth" type="button" style="border-bottom-right-radius: 0;" x-on:click="$refs.{{ widget.name }}_input.value = ''; hasFile = false; showPlaceholder = true; $refs.newFileName.textContent = '';">
                <span class="icon"><i class="fa fa-rotate-left"></i> </span><span style="margin-right: auto">{% translate 'Reset' %}</span>
            </button>
        </div>
        {% if widget.is_initial and not widget.required %}
            <div x-show="!hasFile" class="control is-flex-grow-1">
                <span class="button is-light is-fullwidth" style="border-bottom-right-radius: 0;" x-on:click="clearCheckboxChecked = !clearCheckboxChecked; $refs.clearCheckbox.checked = clearCheckboxChecked; $dispatch('input', {id: `{{ widget.checkbox_id }}`, selector: `#{{ widget.checkbox_id }}`});">
                    <span class="icon"><i class="fa fa-trash-can"></i> </span><span style="margin-right: auto">{% translate 'Delete' %}</span>
                    <input x-ref="clearCheckbox" aria-label="clear file input" type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}{% if widget.attrs.checked %} checked{% endif %}>
                </span>
            </div>
        {% endif %}
    </div>
    <div class="file-name" style="height: auto; border-width: 0 2px 2px 2px; border-color: var(--accrete-hover-color); border-style: solid; border-radius: 0 0 var(--bulma-radius) var(--bulma-radius); padding: var(--bulma-control-padding-vertical) var(--bulma-control-padding-horizontal);">
        <p x-ref="placeholder" x-show="showPlaceholder">{% if widget.is_initial %}{{ widget.value }}{% else %}{% translate 'No file selected' %}{% endif %}</p>
        <p x-ref="newFileName" x-show="!showPlaceholder"></p>
        {% if widget.display_preview and widget.value.url %}
            <img x-show="showPlaceholder" src="{{ widget.value.url }}?tenant_id={{ widget.tenant.pk }}" alt="header logo image" style="object-fit: fill;">
        {% endif %}
        <img x-ref="newFilePreview" x-show="!showPlaceholder" src="" alt="header logo preview" style="object-fit: fill;">
    </div>
</div>