@namespace Connected.Components
@using Connected.Extensions;
@inherits InputBase<string>

<div id="@_elementId" class="@Classname" style="@Style">
    @if (Adornment == Adornment.Start)
    {
        <InputAdornment Class="@AdornmentClassname"
                           Icon="@AdornmentIcon"
                           Color="@AdornmentColor"
                           Size="@IconSize"
                           Text="@AdornmentText"
                           Edge="@Edge.Start"
                           AdornmentClick="@OnAdornmentClick"/>
    }

    <input class="@InputClassname"
           @ref="_elementReference"
           @attributes="UserAttributes"
           type="@InputType.ToDescriptionString()"
           value="@Text"
           placeholder="@Placeholder"
           disabled=@Disabled
           readonly="@ReadOnly"
           @onblur="@OnBlurred"
           @onfocus="OnFocused"
           @oncut="OnCut"
           @oncopy="OnCopy"
           inputmode="@InputMode.ToString()"
           />

    @if (Disabled)
    {
         @*Note: this div must always be there to avoid crashes in WASM, but it is hidden most of the time except if ChildContent should be shown.
                       In Disabled state the tabindex attribute must NOT be set at all or else it will get focus on click
         *@
        <div class="@InputClassname"
             style="@("display:" + (InputType == InputType.Hidden && ChildContent != null ? "inline" : "none"))"
             @onblur="@OnBlurred" @ref="@_elementReference1">
            @ChildContent
        </div>
    }
    else
    {
         @*Note: this div must always be there to avoid crashes in WASM, but it is hidden most of the time except if ChildContent should be shown.*@
        <div class="@InputClassname"
             style="@("display:" + (InputType == InputType.Hidden && ChildContent != null ? "inline" : "none"))"
             tabindex="@(InputType == InputType.Hidden && ChildContent != null ? 0 : -1)"
             @onblur="@OnBlurred" @ref="@_elementReference1">
            @ChildContent
        </div>
    }


    @if (_showClearable && !Disabled)
    {
        <IconButton Class="@ClearButtonClassname"
                       Color="@ThemeColor.Default"
                       Icon="@ClearIcon"
                       Size="@Size.Small"
                       OnClick="@HandleClearButton"/>
    }

    @if (Adornment == Adornment.End)
    {
        <InputAdornment Class="@AdornmentClassname"
                           Icon="@AdornmentIcon"
                           Color="@AdornmentColor"
                           Size="@IconSize"
                           Text="@AdornmentText"
                           Edge="@Edge.End"
                           AdornmentClick="@OnAdornmentClick"/>
    }

    @if (Variant == Variant.Outlined)
    {
        <div class="mud-input-outlined-border"></div>
    }

</div>