@using Sandbox.UI
@inherits Panel

<style>
    Speed {
        position: absolute;
        width: 100%;
        bottom: -25px;
        height: 20%;
        align-items: center;
        justify-content: center;
        transition: all 0.5s sin-ease-in-out;
        flex-direction: column;
        transform: perspective(600px) rotateX(40deg);

        .bar {
            height: 30%;
            width: 20%;
            color: white;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-family: "PressStart";
            font-weight: 800;
            text-shadow: 2px 2px 4px black;
            background-color: rgba(78, 75, 66, 0.5);
            border-left: 5px solid rgba(0, 0, 0, 0.2);
            border-right: 5px solid rgba(0, 0, 0, 0.2);

            .fillbar {
                background-color: rgba(218, 233, 239, 0.5);
                border-top: 5px solid rgba(0, 0, 0, 0.25);
                height: 100%;
            }

            &.Slim {
                margin: 1px;
                height: 5%;

                .fillbar {
                    background-color: rgba(39, 181, 238, 1);
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
</style>

<root>
    <div class="bar Slim">
        <label class="fillbar" style="width: @(BoostProgress * 100)%;"></label>
    </div>
    <div class="bar">
        <label class="fillbar" style="width: @(SpeedProgress * 100)%;"></label>
    </div>
</root>

@code
{
    private PlayerPawn Pawn => LocalPlayer.Pawn;

    private float SpeedProgress => Pawn != null
        ? Pawn.Speed.LerpInverse( 4f, Pawn.BoostSpeed )
        : 0f;

    private float BoostProgress => Pawn != null
        ? Pawn.BoostCoolDown.LerpInverse( 0f, Pawn.BoostAmount )
        : 0f;

    protected override int BuildHash()
        => HashCode.Combine( Pawn?.Speed, Pawn?.BoostCoolDown, Pawn?.BoostAmount );
}