@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data
@using Microsoft.Extensions.Configuration;

@inject IConfiguration Configuration;

@inject CurrentDataService MMDataService

<div class="d-flex justify-content-between mb-2">
    <div class="px-1">
        <b>@SelectedParam</b>
    </div>
    <div class="px-1">
        <div class=" input-group input-group-sm">
            <button class="btn btn-primary" @onclick="() => toggleParam()">
                @if (showParam)
                {
                    <i class="fa-solid fa-chevron-right"></i>
                }
                else
                {
                    <i class="fa-solid fa-chevron-left"></i>
                }
            </button>
            @if (showParam)
            {

                <span class="input-group-text small">Num Rec</span>
                <input class="form-control" @bind="@maxRecord" />
                <span class="input-group-text small">Sample Sec Time</span>
                <input class="form-control" @bind="@sampleSecMin" />

            }

        </div>
        @*@if (showParam)
            {
            <div>
            <b>Num Val</b> <input @bind="@maxRecord" />  <b>Sample sec time</b> <input @bind="@sampleSecMin" />
            </div>
            }*@
    </div>
</div>
<div class="d-flex">
    <div class="px-1 flex-fill">
        @if (LevelVal == null || LevelVal.Count == 0)
        {
            <LoadingDataSmall></LoadingDataSmall>
        }
        else
        {
            <MP.MONO.UI.Components.Chart.Line AspRatio="4" DataTS="@LevelVal" lineColor="@getLineColors("0.75")" backColor="@getFillColors("0.25")" pointColor="@getPointColors("1")" lTens="0" MinValue="@MinVal" MaxValue="@MaxVal"></MP.MONO.UI.Components.Chart.Line>
        }
    </div>
</div>