@using Sandbox.UI
@inherits Panel

<style>
    MatchEnd {
        position: absolute;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;

        &.open {
            opacity: 1;
        }

        .card {
            min-width: 720px;
            flex-direction: column;
            align-items: center;
            padding: 30px 44px;
            background-color: rgba(18, 18, 18, 0.72);
            border: 1px solid rgba(39, 181, 238, 0.45);
        }

        .title {
            font-family: "Wallpoet";
            font-size: 52px;
            color: rgba(39, 181, 238, 1);
            text-shadow: 0 0 16px rgba(39, 181, 238, 0.45);
        }

        .winner {
            margin-top: 12px;
            font-family: "AzeretMono-Medium";
            font-size: 34px;
            color: white;
        }

        .reason {
            margin-top: 10px;
            font-family: "AzeretMono-Medium";
            font-size: 19px;
            color: rgba(255,255,255,0.65);
        }

        .sub {
            margin-top: 14px;
            font-family: "AzeretMono-Medium";
            font-size: 18px;
            color: rgba(39, 181, 238, 0.75);
        }
    }
</style>

<root class="@(PilotGame.MatchEnded ? "open" : "")">
    @if ( PilotGame.MatchEnded )
    {
        <div class="card">
            <label class="title">MATCH OVER</label>
            <label class="winner">@(PilotGame.MatchWasDraw ? "DRAW" : $"{PilotGame.WinnerName} wins")</label>
            <label class="reason">@PilotGame.MatchEndReason</label>
            <label class="sub">Restarting soon...</label>
        </div>
    }
</root>

@code
{
    protected override int BuildHash()
        => HashCode.Combine( PilotGame.MatchEnded, PilotGame.MatchWasDraw, PilotGame.WinnerName, PilotGame.MatchEndReason );
}