<div class="wpuf-fields">
    <div class="signature-field-preview" 
         :style="previewStyle">
        <div style="font-size: 12px; color: #999;">
            <?php esc_html_e( 'Canvas:', 'wpuf-pro' ); ?>
            <span v-if="field.canvas_size === 'custom'">
                {{ field.canvas_width || 450 }} × {{ field.canvas_height || 150 }}px
            </span>
            <span v-else>
                {{ field.canvas_size === 'small' ? '300×100' : (field.canvas_size === 'large' ? '600×200' : '450×150') }}px
            </span>
        </div>
    </div>
    <div v-if="shouldShowClear" class="wpuf-mt-4">
        <button type="button" class="wpuf-bg-red-500 wpuf-text-white wpuf-rounded-md wpuf-px-4 wpuf-py-2 wpuf-cursor-pointer" id="clearSignature">Clear</button>
    </div>
    <p v-if="field.help" class="wpuf-mt-2 wpuf-mb-0 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>