@using Remotely.Server.Models
 
<div>
    <div>Color Sample:</div>
    <div class="color-sample mb-2" style="background-color:@($"rgb({Red},{Green},{Blue})")"></div>

    <div>Red</div>
    <input type="range" min="0" max="255" class="form-control red-picker" @bind="Red" />
    <input type="number" min="0" max="255" class="form-control mb-4" style="width: 150px" @bind="Red" />

    <div>Green</div>
    <input type="range" min="0" max="255" class="form-control green-picker" @bind="Green" />
    <input type="number" min="0" max="255" class="form-control mb-4" style="width: 150px" @bind="Green" />

    <div>Blue</div>
    <input type="range" min="0" max="255" class="form-control blue-picker" @bind="Blue" />
    <input type="number" min="0" max="255" class="form-control mb-4" style="width: 150px" @bind="Blue" />
</div>


@code {

    private ColorPickerModel _color = new();

    [Parameter]
    public ColorPickerModel Color
    {
        get
        {
            return _color;
        }
        set
        {
            _color = value;

        }
    }

    [Parameter]
    public EventCallback<ColorPickerModel> ColorChanged { get; set; }

    public byte Blue
    {
        get => Color.Blue;
        set
        {
            Color.Blue = value;
            ColorChanged.InvokeAsync(_color);
        }
    }
    public byte Green
    {
        get => Color.Green;
        set
        {
            Color.Green = value;
            ColorChanged.InvokeAsync(_color);
        }
    }
    public byte Red
    {
        get => Color.Red;
        set
        {
            Color.Red = value;
            ColorChanged.InvokeAsync(_color);
        }
    }
}
