{% load static %}
{% load app_tags %}
{% block scripts %}
<script type="text/javascript" src="{% static 'portal/js/aimmoGame.js' %}"></script>
{% endblock scripts %}

{% if open_play_games %}
    {% include "portal/partials/popup.html" %}
    <table id="games-table" class="games-table header-primary data-primary">
        <tr class="games-table__header">
            <th class="cell-left">
                <p>Class</p>
            </th>
            <th class="cell-left col-xs-6">
                <p>Challenge</p>
            </th>
            <th class="cell-center">
                <p>Action</p>
            </th>
            <th class="cell-center">
                <input id="gamesListToggle" name="gamesListToggle" type="checkbox" value="">
            </th>
        </tr>
        {% for game in open_play_games %}
        <tr>
            <td>
                <div class="games-table__cell">
                    <p>{{ game.game_class.name }}</p>
                </div>
            </td>
            <td>
                <div class="games-table__cell">
                    <div class="dropdown">
                        <button id="worksheets_dropdown" class="button--secondary button--secondary--dark button--small button--dropdown"
                                data-toggle="dropdown" aria-expanded="false" type="button">
                            <div class="dropdown__text">{{ game.worksheet.id }} - {{ game.worksheet.name }}</div>
                        </button>
                        <ul id="worksheets_dropdown_menu" class="dropdown-menu">
                            {% for worksheet in complete_worksheets %}
                                <li class="dropdown-menu__option">
                                    {% if worksheet.name == game.worksheet.name %}
                                        <a class="button button--small disabled">
                                            <p class="dropdown-menu__option__text">{{ worksheet.id }} - {{ worksheet.name }}</p>
                                            <span class="material-icons-outlined">check</span>
                                        </a>
                                    {% else %}
                                        <a class="button button--small" id="worksheet_{{ worksheet.id }}"
                                            onclick="changeWorksheetConfirmation('{{ game.id|escapejs }}',
                                                    '{{ game.game_class.name|escapejs }}',
                                                    '{{ worksheet.id|escapejs }}')">
                                            <p class="dropdown-menu__option__text">{{ worksheet.id }} - {{ worksheet.name }}</p>
                                        </a>
                                    {% endif %}
                                </li>
                            {% endfor %}
                            {% for worksheet in incomplete_worksheets %}
                                <li class="dropdown-menu__option">
                                    <a class="button button--small disabled">
                                        <p class="dropdown-menu__option__text">{{ worksheet.id }} - {{ worksheet.name }}</p>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </td>
            <td>
                <div class="games-table__buttons">
                    <a class="button button--small button--primary" href="{% url base_url id=game.id %}">Play</a>
                </div>
            </td>
            <td class="cell-center">
                <input type="checkbox" name="game_ids" id="game_{{ game.id }}" value="{{ game.id }}" data-class-name="{{ game.game_class.name }}">
            </td>
        </tr>
        {% endfor %}
    </table>
    <button onclick="clickDeleteGames()" class="button button--primary button--primary--danger button--icon pull-right" id="deleteGamesButton">
        Delete<span class="iconify" data-icon="mdi:delete-outline"></span>
    </button>
{% else %}
    <p>It doesn't look like you have any games created. To create a game, use the 'Select class' button above.</p>
{% endif %}
