@using Sandbox.UI
@inherits Panel

<style>
    StatBars {
        flex-direction: row;
        align-items: center;
        margin-bottom: 18px;

        .column {
            flex-direction: column;
            flex-shrink: 0;

            .type {
                font-family: "Wallpoet";
                font-size: 24px;
                color: rgba(255,255,255,0.6);
                padding-bottom: 6px;
            }

            .bars {
                flex-direction: row;
                gap: 6px;

                .segment {
                    width: 34px;
                    height: 16px;
                    background-color: rgba(255,255,255,0.12);

                    &.active {
                        background-color: rgba(255,255,255,0.85);
                    }
                }
            }
        }

        .barvalue {
            font-family: "AzeretMono-Medium";
            font-size: 28px;
            color: white;
            font-weight: 700;
            margin-left: 16px;
            padding-left: 16px;
            border-left: 2px solid rgba(255,255,255,0.3);
            white-space: nowrap;
            flex-shrink: 0;
        }
    }
</style>

<root>
    <div class="column">
        <div class="type">@Type</div>
        <div class="bars">
            @for ( int i = 0; i < 10; i++ )
            {
                <div class="segment @(i < ActiveSegments ? "active" : "")"></div>
            }
        </div>
    </div>
    <div class="barvalue">@ActiveSegments/10</div>
</root>

@code
{
    public float Value { get; set; }
    public string Type { get; set; } = "STAT";

    private int ActiveSegments => Math.Clamp( (int)(Value * 10f), 0, 10 );

    protected override int BuildHash() => HashCode.Combine( Value, Type );
}