{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
{% endblock %}

{% block styles %}
    <style>
        /* ****************************************************************************************************************** */
        /* *** Tables *** */
        /* ****************************************************************************************************************** */

        .table {
            margin-bottom: 0;
        }

        .table>thead>tr>th,
        .table>tbody>tr>td {
            padding: 10px;
            vertical-align: middle;
        }

        .table>thead>tr>th {
            border: none;
        }

        .header {
            background-color: #f4f4f4;
            border: 1px solid #dee2e6;
        }
    </style>
{% endblock %}

{% block content %}

        <div class="wrapper">
            <div class="instructions">
                <p>
                    In this game we are going to present you a set of words that you will have to classify into groups. 
                    The goal is to classify the words as quickly as possible while making as few mistakes as possible.  
                </p>
                <p>
                    The words and their categories are shown below.
                </p>
            </div>


            <div class="card">
                <table class="table">
                    <thead>
                        <tr class="header">
                            <th>Category</th>
                            <th>Words</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>{{ main_1 }}</th>
                            <td>
                                {% for item in main_1_keywords %}
                                    {% comment %}TODO: forloop counter if < 10 else remove ,{% endcomment %}
                                    <span>{{ item }}, </span>
                                {% endfor %}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ main_2 }}</th>
                            <td>
                                {% for item in main_2_keywords %}
                                    <span>{{ item }}, </span>
                                {% endfor %}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ sub_1 }}</th>
                            <td>
                                {% for item in sub_1_keywords %}
                                    <span>{{ item }}, </span>
                                {% endfor %}
                            </td>
                        </tr>
                        <tr>
                            <th>{{ sub_2 }}</th>
                            <td>
                                {% for item in sub_2_keywords %}
                                    <span>{{ item }}, </span>
                                {% endfor %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="instructions">
                <p>
                    This game is played 7 rounds. The instructions change slightly with each turn, so be careful!
                </p>
            </div>

            <button class="otree-btn-next btn btn-primary">Start</button>

        </div>

{% endblock %}