{% load static %}
{% load dlux_tags %}
<div class="dlux-profile-image-input-wrapper">
    <div class="dlux-profile-image-preview-area">
        {% if widget.value %}
            <img src="{{ widget.value.url }}" alt="Profile Preview" class="dlux-image-preview-circle" id="dlux-profile-preview-{{ widget.attrs.id }}">
        {% else %}
            <div class="dlux-image-preview-circle dlux-image-placeholder" id="dlux-profile-preview-{{ widget.attrs.id }}">
                <i class="bi bi-person-fill"></i>
            </div>
        {% endif %}
        
        <label for="{{ widget.attrs.id }}" class="dlux-image-upload-label" title="{{ DLUX_STRINGS.btn_update|default:'Update' }}">
            <i class="bi bi-camera-fill"></i>
        </label>
    </div>
    <input type="{{ widget.type }}" name="{{ widget.name }}" {% if widget.value %}value="{{ widget.value }}"{% endif %} {% for name, value in widget.attrs.items %}{{ name }}="{{ value }}" {% endfor %} class="d-none dlux-profile-file-input" data-preview-target="dlux-profile-preview-{{ widget.attrs.id }}">
</div>
<script src="{% dlux_static 'dlux/users/js/profile_image_widget.js' %}" nonce="{{ request.csp_nonce }}" defer></script>