{{define "title"}}QRank{{end}}
{{define "content"}}
<div class="card">
    <h2>Enter a game</h2>

    {{if .Table}}
        <p class="small">Table: <span class="badge">{{.Table.Slug}}</span></p>
    {{end}}

    <form method="POST" action="/enter">
        <div class="players">
            {{/* Player 1 */}}
            <div class="player-row">
                <input class="input" name="p1" 
                       {{if (index .Form "p1")}}value="{{index .Form "p1"}}"{{else}}value="{{.CurrentUser.Username}}"{{end}}
                       placeholder="Player 1">
                <div class="team-choice">
                    <label><input type="radio" name="team_p1" value="A" checked>A</label>
                    <label><input type="radio" name="team_p1" value="B">B</label>
                    <label><input type="radio" name="team_p1" value="none">None</label>
                </div>
            </div>

            {{/* Player 2 */}}
            <div class="player-row">
                <input class="input" name="p2" value="{{index .Form "p2"}}" placeholder="Player 2">
                <div class="team-choice">
                    <label><input type="radio" name="team_p2" value="A">A</label>
                    <label><input type="radio" name="team_p2" value="B" checked>B</label>
                    <label><input type="radio" name="team_p2" value="none">None</label>
                </div>
            </div>

            {{/* Player 3 */}}
            <div class="player-row">
                <input class="input" name="p3" value="{{index .Form "p3"}}" placeholder="Player 3 (optional)">
                <div class="team-choice">
                    <label><input type="radio" name="team_p3" value="A">A</label>
                    <label><input type="radio" name="team_p3" value="B">B</label>
                    <label><input type="radio" name="team_p3" value="none" checked>None</label>
                </div>
            </div>

            {{/* Player 3 */}}
            <div class="player-row">
                <input class="input" name="p4" value="{{index .Form "p4"}}" placeholder="Player 4 (optional)">
                <div class="team-choice">
                    <label><input type="radio" name="team_p4" value="A">A</label>
                    <label><input type="radio" name="team_p4" value="B">B</label>
                    <label><input type="radio" name="team_p4" value="none" checked>None</label>
                </div>
            </div>
        </div>

        <div style="height:16px"></div>

        <div class="scores">
            <label class="label">Score Team A</label>
            <input class="input" type="number" name="scoreA" value="{{index .Form "scoreA"}}" placeholder="0" min="0" max="10" required>

            <div style="height:12px"></div>

            <label class="label">Score Team B</label>
            <input class="input" type="number" name="scoreB" value="{{index .Form "scoreB"}}" placeholder="0" min="0" max="10" required>
        </div>

        <div style="height:16px"></div>
        <button class="btn btn-primary" type="submit">Submit result</button>
    </form>
</div>

<style>
.player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.team-choice {
    display: flex;
    gap: 10px;
    font-size: 14px;
}
.players {
    margin-bottom: 20px;
}
</style>
{{end}}