@namespace BootstrapBlazor.Components
@inherits ValidateBase<string>
@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]

@if (IsShowLabel)
{
    <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
}
<div class="input-group bb-color-picker">
    @if (IsSupportOpacity)
    {
        <div id="@Id" class="form-control form-control-color">
            <div class="bb-color-picker-body" style="--bb-color-pick-val: @CurrentValueAsString"></div>
        </div>
    }
    else
    {
        <input @attributes="@AdditionalAttributes" type="color" id="@Id" class="form-control form-control-color" disabled="@Disabled" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string>(this, async v => await Setter(v), CurrentValueAsString)" />
    }

    @if (Template != null)
    {
        @Template(CurrentValueAsString)
    }
    else if (Formatter != null)
    {
        <input type="text" readonly class="@ClassName" value="@_formattedValueString" />
    }
    else
    {
        <input type="text" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
    }
</div>
