{% if widget.error %}
    <div class="pixbin-config-error">Upload widget configuration error: {{ widget.error }}</div>
{% else %}
    <div class="pixbin-upload-widget"
         data-presigned-url-endpoint="{{ widget.presigned_url_endpoint }}"
         data-complete-upload-endpoint="{{ widget.complete_upload_endpoint }}">
        <!-- Hidden input to store the image UUID -->
        <input type="hidden"
               name="{{ widget.name }}"
               class="pixbin-hidden-input"
               {% if widget.value %}value="{{ widget.value }}"{% endif %}>
        <!-- Drop zone -->
        <div class="pixbin-dropzone{% if widget.value %} has-image{% endif %}">
            <div class="pixbin-dropzone-icon">
                <svg width="48"
                     height="48"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="1.5">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                    <polyline points="17 8 12 3 7 8" />
                    <line x1="12" y1="3" x2="12" y2="15" />
                </svg>
            </div>
            <p class="pixbin-dropzone-text">Drop an image here or click to select</p>
            <p class="pixbin-dropzone-text-small">Supports JPG, PNG, GIF, WebP</p>
        </div>
        <!-- Hidden file input -->
        <input type="file"
               class="pixbin-file-input"
               accept="image/*"
               {% for name, value in widget.attrs.items %} {% if value is not False and name != 'type' %}{{ name }}{% if value is not True %}="{{ value }}"{% endif %}
               {% endif %}
               {% endfor %}>
        <!-- Progress bar -->
        <div class="pixbin-progress">
            <div class="pixbin-progress-bar">
                <div class="pixbin-progress-fill"></div>
            </div>
            <div class="pixbin-progress-text">Uploading...</div>
        </div>
        <!-- Preview -->
        <div class="pixbin-preview{% if widget.value %} active{% endif %}">
            {% if widget.value %}
                <img src="" class="pixbin-preview-image" alt="Preview">
            {% else %}
                <img src="" class="pixbin-preview-image" alt="Preview">
            {% endif %}
            <div class="pixbin-preview-info">
                Image ID: <span class="pixbin-preview-id">
                {% if widget.value %}{{ widget.value }}{% endif %}
            </span>
        </div>
        <button type="button" class="pixbin-remove-btn">Remove image</button>
    </div>
    <!-- Error message -->
    <div class="pixbin-error"></div>
</div>
{% endif %}