@using Sandbox;
@using Sandbox.UI;
@using NZombies;
@inherits PanelComponent

@*
    ⛔ THE NAMESPACE DIRECTIVE IS REQUIRED: this panel is made in code (KeypadMenu.EnsureHost), and without it the
    generated type lands in the global namespace, where NZombies cannot name it — the Wunderfizz panel's note.
*@
@namespace NZombies

@*
    BASALT'S SHIELD LOCK — the pad KeypadMenu opens: four slots, tinted blue, yellow, green and red, filling with the glyphs
    pressed; a line for checking or wrong, and one more while a wrong code has jammed the lock until the next round, its
    keys dimmed; the eight glyphs of the Color Rings clock as keys, in two rows of four; and BACK, CLEAR and CLOSE. The
    state is KeypadMenu's; this only draws it.

    ⛔ <root> IS ALWAYS EMITTED and only its contents are conditional, as the Wunderfizz panel's is.
*@

<root>
    @if ( KeypadMenu.IsOpen )
    {
        <div class="keypad">
            <div class="title">ENTER THE CODE</div>

            <div class="slots">
                @for ( var i = 0; i < 4; i++ )
                {
                    <div class="slot" style="@KeypadMenu.SlotStyle( i )">
                        @if ( KeypadMenu.GlyphIn( i ) > 0 )
                        {
                            <img class="glyph" src="@KeypadMenu.GlyphImage( KeypadMenu.GlyphIn( i ) )" />
                        }
                    </div>
                }
            </div>

            <div class="status">@KeypadMenu.Status</div>

            @if ( HexPlatforms.LockJammedShown )
            {
                <div class="jammed">LOCKED UNTIL THE NEXT ROUND</div>
            }

            <div class="keys @(HexPlatforms.LockJammedShown ? "dead" : "")">
                @foreach ( var glyph in KeypadMenu.Glyphs )
                {
                    <div class="key" onclick=@(() => KeypadMenu.Press( glyph ))>
                        <img class="glyph" src="@KeypadMenu.GlyphImage( glyph )" />
                    </div>
                }
            </div>

            <div class="controls">
                <div class="control" onclick=@(() => KeypadMenu.Back())>BACK</div>
                <div class="control" onclick=@(() => KeypadMenu.Clear())>CLEAR</div>
                <div class="control close" onclick=@(() => KeypadMenu.Close())>CLOSE</div>
            </div>
        </div>
    }
</root>

@code
{
    protected override int BuildHash() => System.HashCode.Combine( KeypadMenu.IsOpen, KeypadMenu.Entered, KeypadMenu.Status,
        HexPlatforms.TuneVersion, HexPlatforms.LockJammedShown );
}