<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-12">
    <div class="card" id="game-list">
        <div class="card-body" style="padding-bottom: 0 !important;">
          <h5 class="card-title" style="margin-bottom: 1.25rem !important;">Games In Progress</h5>
          {% if user %}
          <table class="table table-borderless" id="game-table">
            <thead>
              <tr>
                <th style="vertical-align: middle;">Game</th>
                <th style="width: 50px; text-align: center; font-weight: normal;"><a href="#game-table" class="text-primary"  data-toggle="modal" data-target="#modalNewGame">Add</a></th>
              </tr>
            </thead>
            <tbody>
              {% if game_list is defined and account_url != [] %}
                {% for game in game_list %}
                  <tr>
                    <th><a href="{{ game[3] }}" class="game-link">{{ game[2] }}</a></th>
                    <td style="vertical-align: middle;"><a href="#game-table" onclick="deleteGame({{ game[0] }})" class="text-danger">Delete</a></td>
                  </tr>
                {% endfor %}
              {% endif %}
            </tbody>
          </table>
          <div style="text-align: center;">
            <a href="/logout" class="text-warning">Log out</a>
            <br><br>
          </div>
          {% else %}
            <div style="text-align: center;">
              <a href="/login" class="text-success">Log in</a>
              <br><br>
            </div>
          {% endif %}
        </div>
    </div>
</div>
