{% extends 'game/base.html' %}
{% load static %}

{% block title %}Code for Life - Rapid Router - Level moderation{% endblock %}

{% block scripts %}
{{block.super}}
<script src="{% static 'game/js/jquery.dataTables.min.js' %}"></script>
<script type="text/javascript" src="{% static 'game/js/saving.js' %}"></script>
<script type="text/javascript" src="{% static 'game/js/level_moderation.js' %}"></script>
<script type="text/javascript" src="{% static 'game/js/foundation/vendor/js.cookie.min.js' %}"></script>
{% endblock %}

{% block css %}
{{block.super}}
<link href="{% static 'game/css/jquery.dataTables.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'game/css/dataTables.custom.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'game/css/dropdown.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'game/css/input.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'game/css/level_moderation.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block header %}
<section class="banner banner--rapid-router">
    <img title="Rapid Router logo" alt="Rapid Router logo" src="{% static 'common/img/RR_logo.svg' %}">
</section>
{% endblock header %}

{% block nav_ocargo_moderate %}
<a class="button button--secondary button--secondary--light sub-nav--teacher-active" href="{% url 'level_moderation' %}">Moderate</a>
{% endblock nav_ocargo_moderate %}

{% block content %}
<div class="background">
    <div class="container">
        <div>
            <h4>Level moderation</h4>
            <p>Search or filter the levels to find specific details, and click 'Play' to view the games.</p>
            <p>You can approve or delete any level.</p>

            <form action="" method="post" id="moderateForm">
                {% csrf_token %}
                <div class="row form--row">
                    <div class="col-sm-6">
                        <div class="dropdown">
                            <button class="button--secondary button--secondary--dark button--dropdown" type="button" data-toggle="dropdown" aria-expanded="false">
                                <div class="dropdown__text">Filter classes</div>
                            </button>
                            <div class="dropdown-menu">
                                <ul>
                                    <li class="dropdown-menu__option">
                                        <a class="button button--regular">
                                            <p class="dropdown-menu__option__text">
                                                <label for="select-all-classes">
                                                    <input type="checkbox" id="select-all-classes"><strong>Select all</strong>
                                                </label>
                                            </p>
                                        </a>
                                    </li>
                                    {% for class in form.classes %}
                                        <li class="dropdown-menu__option">
                                            <a class="button button--regular">
                                                <p class="dropdown-menu__option__text">{{ class }}</p>
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>

                                <div class="row">
                                    <div class="col-sm-6 text-right">
                                        <a class="button button--secondary button--secondary--dark" id="clear-classes">Clear</a>
                                    </div>
                                    <div class="col-sm-6 text-left">
                                        <button class="button button--primary" type="submit" name="view">Apply</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form--row__input col-sm-6">
                        <div class="input--icon">
                            <input type="text" name="Search" placeholder="Search" id="moderateSearch"><span class="iconify" data-icon="mdi:search"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="mainBody container">
        {% include "portal/partials/popup.html" %}
        {% if levelData %}
        <div class="tableWrapper" id="tableWrapper">
            {% if thead %}
            <table id="moderateTable" class="header-primary data-primary">
                <thead>
                    <tr>
                        <th rowspan="2">Student</th>
                        <th rowspan="2">Level name</th>
                        <th rowspan="2">Shared with</th>
                        <th colspan="3">Actions</th>
                    </tr>
                    <!-- Extra header only needed for DataTables - should be hidden to the user -->
                    <tr class="d-none">
                        <th>Play</th>
                        <th>Approve</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                    {% for level in levelData %}
                    <tr>
                        <td><small>{{level.student}}</small></td>
                        <td><small>{{level.name}}</small></td>
                        <td><small>{{level.shared_with}}</small></td>
                        <td class="text-center">
                            <a class="button button--small button--primary play" href="{% url 'play_custom_level' level.id %}">Play</a>
                        </td>
                        <td class="text-center">
                            {% if level.needs_approval %}
                                <button class="button button--small button--primary approve" value={{level.id}}>
                                    Approve
                                </button>
                            {% else %}
                                <button class="button button--small button--primary disabled button--icon">
                                    Approved<span class="iconify" data-icon="mdi:tick"></span>
                                </button>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <button class="button button--small button--primary--danger button--icon delete" value={{level.id}}>
                                Delete<span class="iconify" data-icon="mdi:delete-outline"></span>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
        {% else %}
            {% if thead %}
            <p>No levels found.</p>
            {% else %}
            <p>Select a class to view the levels created by students.</p>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endblock %}