@page
@model JoshHeaps.Net.Pages.WatchModel
@{
    Layout = "_Layout";
    ViewData["Title"] = "Watch Chess";
}

<div id="watchHeader">
    <h1>Live Chess</h1>
    <p id="watchStatus">Loading games…</p>
    <div id="watchControls">
        <fieldset class="enginePicker">
            <legend>White</legend>
            <select id="whiteEngine">
                <option value="custom">Custom (v1)</option>
                <option value="customLearned" selected>Custom (Learned)</option>
                <option value="stockfish">Stockfish</option>
            </select>
            <select id="whiteSkill">
                @for (int i = 1; i <= 20; i++)
                {
                    <option value="@i" @(i == 4 ? "selected" : "")>@i</option>
                }
            </select>
        </fieldset>
        <fieldset class="enginePicker">
            <legend>Black</legend>
            <select id="blackEngine">
                <option value="custom" selected>Custom (v1)</option>
                <option value="customLearned">Custom (Learned)</option>
                <option value="stockfish">Stockfish</option>
            </select>
            <select id="blackSkill">
                @for (int i = 1; i <= 20; i++)
                {
                    <option value="@i" @(i == 4 ? "selected" : "")>@i</option>
                }
            </select>
        </fieldset>
        <button id="startCpuVsCpu" onclick="Spectate.startCpuGame()">Watch CPU vs CPU</button>
        <fieldset class="enginePicker">
            <legend>Auto-train games</legend>
            <input id="autoTrainCount" type="number" min="0" max="16" step="1" />
            <button id="applyAutoTrain" onclick="Spectate.setAutoTrainCount()">Apply</button>
        </fieldset>
    </div>
    <a id="backToPlay" href="/chess">← Play a game</a>
    <a id="viewWeights" href="/weights">View learned weights →</a>
</div>

<div id="gamesFeed"></div>

@section Scripts {
    <script src="~/js/signalr/signalr.min.js"></script>
    <script src="~/js/ChessScripts/Spectate.js"></script>
}

@section Styles {
    <link rel="stylesheet" href="~/css/chess/game.css?v=@ViewData["cssVersion"]" />
    <link rel="stylesheet" href="~/css/chess/spectate.css?v=@ViewData["cssVersion"]" />
}