@using Microsoft.AspNetCore.Components.Web


@attribute [StreamRendering]
@rendermode InteractiveServer

<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
    <!-- Base number line -->
    @* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@

@*     <!-- Draggable nodes for adjusting range breakpoints -->
    @for (int i = 0; i < TempRanges.Count; i++)
    {
        var left = i == 0 ? 0 : TempRanges[i - 1].Max;
        var leftPercent = (left / 100.0) * 100;

        <div class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 cursor-pointer"
             style="left: @leftPercent%"
             @onmousedown="(e) => OnMouseDown(i, e)"
             title="@left°F">
        </div>
    } *@

    <!-- Color pickers for each range -->
    <div class="card rounded-3 w-50 mx-auto">
        <div class="card-header mb-3 text-center fw-bold">
            Temperature Blanket Colors
        </div>

        @for (int i = 0; i < TempRanges.Count; i++)
        {
            var localIndex = i;
@*             if (i == 0)
            {
                <div class="row align-items-center mb-2">
                    <div class="col-6 text-end pe-2">
                        <label class="form-label mb-0">
                              @TempRanges[i].Max&deg;
                        </label>
                    </div>
                    <div class="col-6 ps-2">
                        <input type="color"
                               value="@TempRanges[i].Color"
                               @onchange="e => HandleColorChange(e, localIndex)" />
                    </div>
                </div>
            }
            else if (i == 10)
            {
                <div class="row align-items-center mb-2">
                    <div class="col-6 text-end pe-2">
                        <label class="form-label mb-0">
                            @TempRanges[i].Min&deg; +
                        </label>
                    </div>
                    <div class="col-6 ps-2">
                        <input type="color"
                               value="@TempRanges[i].Color"
                               @onchange="e => HandleColorChange(e, localIndex)" />
                    </div>
                </div>
            }
            else
            {
                <div class="row align-items-center mb-2">
                    <div class="col-6 text-end pe-2">
                        <label class="form-label mb-0">
                            @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
                        </label>
                    </div>
                    <div class="col-6 ps-2">
                        <input type="color"
                               value="@TempRanges[i].Color"
                               @onchange="e => HandleColorChange(e, localIndex)" />
                    </div>
                </div>
            } *@

            <div class="row align-items-center mb-2">
                <div class="col-6 text-end pe-2">
                    <label class="form-label mb-0">
                        @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
                    </label>
                </div>
                <div class="col-6 ps-2">
                    <input type="color"
                           value="@TempRanges[i].Color"
                           @onchange="e => HandleColorChange(e, localIndex)" />
                </div>
            </div> 
        }
    </div>
</div>