{% extends "box/base/box.html" %}
{% load i18n %}
{% load l10n %}
{% load staticfiles %}
{% get_current_language as LANGUAGE_CODE %}

{% block boxhelp %}
<div class="boxhelp">
    <div class="help">
        <div class="icon">
            <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
        </div>
        <div class="boxhelp-box">
            <p>{% blocktrans %}This is the list of groups you own.{% endblocktrans %}</p>
            <p>{% blocktrans %}Groups are collections of users.{% endblocktrans %}</p>
            <p>{% blocktrans %}You can share templates with your groups, so
            that they can run instances of those templates.
            {% endblocktrans %}</p>
        </div>
    </div>
    <div class="icon">
        <img src="" alt="toggle" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="groups" id="toggle-box-groups"/>
    </div>
</div>
{% endblock %}

{% block title %}
    {% trans "My Groups" %}
{% endblock title %}

{% block content %}
<ul class="vm-list entry-list" id="groups">
    {% if groups %}
    {% for group in groups %}
        {% include "box/group/entry.html" %}
    {% endfor %}
    {% else %}
    <div class="tooltip">
        <div class="container">
            <p>{% trans "You have no groups." %}</p>
            <p>
                {% trans "Create a new one, and add your students to the new group." %}
            </p>
            <div class="tail"></div>
        </div>
    </div>
    {% endif %}
    <li id="show-hidden-groups" class="entry small-row">
        <div class="summary">
            <div class="name">{% trans "Show hidden groups" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row" id="new-group">
        <div class="summary">
            <div class="name">{% trans "Create new group" %}</div>
            <div class="clear"></div>
        </div>
        <div id="new-group-wizard" style="display: none">
            <form action="{% url school.views.group_new %}" method="POST" class="wizard">
                {% csrf_token %}
                <h3>{% trans "Create new group" %}</h3>
                <ul>
                    <li>
                        <label for="new-group-name">{% trans "Group name" %}</label>
                        <input type="text" name="name" id="new-group-name" />
                    </li>
                    <li>
                        <label for="new-group-semester">{% trans "Semester" %}</label>
                        <select name="semester" id="new-group-semester">
                            {% for semester in semesters %}
                            <option value="{{semester.id}}">{{semester.name}}</option>
                            {% endfor %}
                        </select>
                    </li>
                    <li>
                        <label for="new-group-members">{% trans "Members" %}</label>
                        <textarea name="members" placeholder="{% trans 'Student NEPTUN codes, one per line' %}" id="new-group-members"></textarea>
                        <div class="clear"></div>
                    </li>
                </ul>
                <nav>
                    <input type="reset" class="prev" value="{% trans "Cancel" %}" />
                    <input type="submit" class="next" value="{% trans "Done" %}" />
                    <div class="clear"></div>
                </nav>
            </form>
        </div>
    </li>
</ul>
{% endblock content %}
