{% extends "base.html" %}
{% block body %}
<div style="margin: 5vh 5vw">
    <h1>
        <div id="team">Team in hotseat: Pending</div>
        <div id="player">Player in hotseat: Pending</div>
    </h1>
    <h2>
        <div id="locked_out">Locked out: </div>
        <div id="scores">Scores: {}</div>
        <div id="answer"></div>
    </h2>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" pattern="[0-9]+" id="score_value" value="1">
        <label class="mdl-textfield__label" for="score_value">Score Value</label>
        <span class="mdl-textfield__error">Input is not a number!</span>
    </div>
    <div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="pass"
            style="height:5vh;width:10vw;margin-right:1vw;">Pass</button>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="right"
            style="height:5vh;width:10vw;margin-right:1vw;" disabled>Right</button>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="wrong"
            style="height:5vh;width:10vw;margin-right:1vw;" disabled>Wrong</button>
        <div style="height:5vh;"></div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="standard"
            style="height:5vh;width:10vw;margin-right:1vw;" disabled>Standard</button>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="picture"
            style="height:5vh;width:10vw;margin-right:1vw;">Picture</button>
        <div style="height:5vh;"></div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="reset-button"
            style="height:5vh;width:10vw;margin-right:1vw;">Reset</button>
    </div>
</div>

<dialog id="reset-dialog" class="mdl-dialog">
    <h3 class="mdl-dialog__title">Reset Game</h3>
    <div class="mdl-dialog__content">
        <p>
            Resetting the game clears the score but leaves the teams ready to play again.
        </p>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="reset-confirm">Reset</button>
        <button type="button" class="mdl-button dialog-cancel">Cancel</button>
    </div>
</dialog>

{% endblock %}