{% extends 'base.html' %}
{% block content %}
<div class="pure-g" style="margin:20px;">
  <div class="pure-u-1 pure-u-md-1-3" style="padding:10px;">
    <h2>Lobby</h2>
    <p>Wins: {{ wins }}</p>
    <form class="pure-form" action="{{ url_for('create_game') }}" method="post">
      <button type="submit" class="pure-button pure-button-primary">Create Game</button>
      <select id="language" name="language" class="subtle-language">
        {% for lang in languages %}
        <option value="{{ lang }}">{{ lang|upper }}</option>
        {% endfor %}
      </select>
      <label style="margin-left:1em;">
        <input type="checkbox" name="hard_mode" value="1"> Hard Mode
      </label>
    </form>
  </div>
  <div class="pure-u-1 pure-u-md-1-3" style="padding:10px;">
    <form class="pure-form pure-form-stacked" action="{{ url_for('join_game') }}" method="post">
      <fieldset class="pure-group">
        <label for="code">Game Code</label>
        <input id="code" class="pure-input-1" type="text" name="code" maxlength="6" placeholder="e.g. ABC123">
      </fieldset>
      <button type="submit" class="pure-button">Join Game</button>
    </form>
  </div>
  <div class="pure-u-1 pure-u-md-1-3" style="padding:10px;">
    <a href="{{ url_for('logout') }}" class="pure-button">Logout</a>
  </div>
</div>
{% endblock %}