<div class="image-uploader">
    <!-- Image Preview -->
    <div class="image-preview" if="{{image_url}}">
        <img src="{{image_url}}" alt="Uploaded image" style="max-width: 100%; height: auto; border-radius: 8px;">
        <button data-live-action="clear" class="btn-clear">
            Clear Image
        </button>
    </div>

    <!-- Upload Zone -->
    <div class="upload-zone" data-live-dropzone if="!{{image_url}}">
        <div class="upload-icon">📁</div>
        <p>Drag & drop an image here</p>
        <p style="color: #999; font-size: 0.875rem;">or</p>
        <label class="upload-button">
            Choose File
            <input type="file" data-live-upload accept="image/*" style="display: none;">
        </label>
        <p style="color: #666; font-size: 0.75rem; margin-top: 1rem;">
            Max size: 5MB | Formats: JPG, PNG, GIF, WebP
        </p>
    </div>

    <!-- Upload Stats -->
    <div class="upload-stats">
        <p>Total uploads: {{upload_count}}</p>
    </div>
</div>

<style>
.image-uploader {
    padding: 1rem;
}

.upload-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
}

.upload-zone.drag-over {
    border-color: #2196F3;
    background: #e3f2fd;
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.upload-button {
    display: inline-block;
    background: #2196F3;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.upload-button:hover {
    background: #1976D2;
}

.image-preview {
    position: relative;
}

.btn-clear {
    margin-top: 1rem;
    background: #f44336;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-clear:hover {
    background: #d32f2f;
}

.upload-stats {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.875rem;
}
</style>
