{% extends "base.html" %}
{% block content %}
<section class="play-layout" data-session="{{ session.id }}" data-token="{{ player.token }}" data-host="{{ '1' if player.is_host else '0' }}" data-player="{{ player.id }}">
  <aside class="pixel-panel board">
    <h2>PLAYERS</h2>
    <ol id="players"></ol>
    <p class="tiny" id="invite"></p>
    {% if player.is_host %}
    <form class="stack host-settings" method="post" action="/play/{{ session.id }}/settings" id="host-form">
      <h3>HOST SETTINGS</h3>
      <label>PLAYERS
        <input type="number" name="max_players" min="2" max="12" value="{{ session.max_players }}" />
      </label>
      <label>ROUNDS
        <input type="number" name="num_rounds" min="4" max="32" value="{{ session.num_rounds }}" />
      </label>
      <label class="check"><input type="checkbox" name="extra_guesses" {% if session.extra_guesses %}checked{% endif %} /> Extra clues</label>
      <label class="check"><input type="checkbox" name="hide_company" {% if session.hide_company %}checked{% endif %} /> Hide company</label>
      <label class="check"><input type="checkbox" name="hide_subject" {% if session.hide_subject %}checked{% endif %} /> Hide subject</label>
      <button class="btn btn-small" type="submit">SAVE</button>
    </form>
    <button class="btn" id="start-btn" type="button">START GAME</button>
    <button class="btn btn-ghost" id="next-btn" type="button" hidden>NEXT ROUND</button>
    {% endif %}
  </aside>
  <div class="pixel-panel stage">
    <div class="mascot-wrap compact">
      {% include "mascot.html" %}
      <p class="speech" id="tip">Waiting in the lobby. The host will start the match.</p>
    </div>
    <div id="stage"></div>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/js/play.js"></script>
{% endblock %}