{% extends "game.html" %}

{% block game_content %}
  <div class="lobby">
    <h2>Lobby</h2>
    <form method="post">
      {% csrf_token %}
      <div class="lobby-info">
        <div class="access-code">
          <p>Access Code: {{ access_code }}</p>
          <p><img class = "qrcode" src = "{% url 'qr_code' access_code=access_code %}"></p>
        </div>
        <div class="game-options">
          <p class="options-header">Options</p>
          <div class="role-options">
            {{ form.as_ul }}
          </div>
        </div>
      </div>
      <ul id="players-in-lobby">
        {% for listed_player in players %}
          <li{% if player == listed_player %} class="this-player"{% endif %}>{{ listed_player.name }}</li>
        {% endfor %}
      </ul>

      <div class="button-container">
        <button type="submit" formaction="{% if is_observer %}{% url 'observe_start' access_code=access_code %}{% else %}{% url 'start' access_code=access_code player_secret=player_secret %}{% endif %}" class="button-start">Start</button>
        {% if is_observer %}
        <a href="{% url 'index' %}" class="button button-leave">Leave</a>
        {% else %}
        <button type="submit" formaction="{% url 'leave' access_code=access_code player_secret=player_secret %}" class="button-leave">Leave</button>
        {% endif %}
      </div>
    </form>
  </div>
{% endblock %}

{% block game_handle_new_status %}
        if(oldStatus.game_phase == newStatus.game_phase) {
            if(JSON.stringify(oldStatus.players)
                    != JSON.stringify(newStatus.players)) {
                lobby_list = document.getElementById('players-in-lobby');
                $(lobby_list).empty();
                newStatus.players.forEach(function(name) {
                    var el = document.createElement('li');
                    el.innerText = name;
                    if(name == '{{ player.name }}') {
                        el.className = 'this-player';
                    }
                    lobby_list.appendChild(el);
                });
                statusObj.players = newStatus.players;
            }
            if(JSON.stringify(oldStatus.rounds)
                    != JSON.stringify(newStatus.rounds)) {
                for(var i = 1; i <= 5; i++) {
                    document.getElementById('score-box-' + i).innerText
                        = newStatus.rounds[i - 1];
                }
                statusObj.rounds = newStatus.rounds;
            }
            return true;
        } else {
            return false;
        }
{% endblock %}