{% extends "base.html.j2" %}
{% block page_title %}{{ codenames.codenames_name }}{% endblock %}
{% block og_page_title %}{{ codenames.codenames_name }}{% endblock %}
{% block head_extra %}{{ super() }}
    <link rel="stylesheet" href="{{ site.assets_path }}/css/codenames.css" />{% endblock %}
{% block body %}<div class="bootstrap-wrapper">
    <div class="container">
        <div class="row">
            <main class="col-md-9">
                <div id="grid_p1"></div>
                <div id="grid_p2"></div>
                <button onclick="onSetGameMode(0)">Normal</button>
                <button onclick="onSetGameMode(1)">Duet</button>
                <button onclick="onSetGameMode(2)">Duet Mayhem</button>
                <br>
                <label for="s">Seed:</label>
                <input type="text" name="s" id="s"/>
                <button onclick="onRandomSeed()">Random</button>
                <br>
                <label>Size:</label>
                <input type="number" name="w" id="w" value="5"/>
                <span>x</span>
                <input type="number" name="h" id="h" value="5"/>
                <br>
                <span class="game-mode-0">
                    <label for="rb">Red/blue tiles:</label>
                    <input type="number" name="rb" id="rb" value="8"/>
                    <label>(+1 for the other team)</label>
                    <br>
                </span>
                <span class="game-mode-1 game-mode-2">
                    <label for="g">Green tiles (per person):</label>
                    <input type="number" name="g" id="g" value="9"/>
                    <br>
                </span>
                <span class="game-mode-1">
                    <label for="cg">Shared green tiles:</label>
                    <input type="number" name="cg" id="cg" value="3"/>
                    <br>
                </span>
                <label for="b">Black tiles:</label>
                <input type="number" name="b" id="b" value="3"/>
                <br>
                <span class="game-mode-1">
                    <label for="cb">Shared black tiles:</label>
                    <input type="number" name="cb" id="cb" value="1"/>
                    <br>
                    <label for="bg">Black-green tiles:</label>
                    <input type="number" name="bg" id="bg" value="1"/>
                    <br>
                </span>
                <!-- TODO: EXTRA INFO WITH CALCULATED VALUES -->
                <span class="game-mode-1 game-mode-2">
                    <input type="radio" id="p0" name="p" value="0" checked="checked">
                    <label for="p0">Player1</label>
                    <input type="radio" id="p1" name="p" value="1">
                    <label for="p1">Player2</label>
                    <input type="radio" id="p2" name="p" value="2">
                    <label for="p2">Both</label>
                    <br>
                </span>
                <button onclick="onGenerateButton()">Generate</button>
            </main>
        </div>
    </div>
</div>{% endblock %}
{% block footer %}
    <script src="/assets/js/codenames.js"></script>
{% endblock %}