@namespace BootstrapBlazor.Components
@inherits CircleBase

<div @attributes="@AdditionalAttributes" class="@ClassString">
    @if (Value > TimeSpan.Zero)
    {
        <svg class="circle-outer" style="@PrevStyleString">
            <circle r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" stroke-width="2" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none" />
            <circle class="@ProgressClassString" r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" stroke-dashoffset="@ValueString" stroke-dasharray="@DashString" stroke-width="@StrokeWidth" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" />
        </svg>
        @if (ShowProgress)
        {
            <div class="circle-body">
                <span class="timer-body">@ValueTitleString</span>
                <span class="timer-alert"><i class="@Icon"></i>@AlertTime</span>
            </div>
        }
        <div class="timer-buttons">
            <button @onclick="@OnClickCancel" class="btn btn-secondary">@CancelText</button>
            <button @onclick="@OnClickPause" class="@PauseClassString">@GetPauseText()</button>
        </div>
    }
    else
    {
        <TimePicker Value="@Value" OnConfirm="@OnStart" ConfirmButtonText="@StarText" />
    }
</div>
