@inherits FormComponent<string>
@if (Visible)
{
    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")">
        <canvas class="rz-signature-pad-canvas"></canvas>
        @if (AllowClear && !Disabled && !string.IsNullOrEmpty(Value))
        {
            <button type="button" class="rz-signature-pad-clear" @onclick="@Clear" aria-label="@ClearAriaLabel" title="@ClearAriaLabel">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
        }
        @if (!string.IsNullOrEmpty(Placeholder) && string.IsNullOrEmpty(Value))
        {
            <span class="rz-signature-pad-placeholder">@Placeholder</span>
        }
    </div>
}
