{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<div class="boxes" id="groups">
    <div class="contentblock">
        <h2>{% trans "My Groups" %}</h2>
        <div class="content">
            <ul class="wm-list">
                {% if groups %}
                {% for group in groups %}
                <li class="wm">
                    <div class="summary">
                        <div class="name">{{ group.name }}</div>
                        <div class="actions">
                            <a href="#" class="delete" data-id="{{group.id}}" data-name="{{group.name}}">
                                <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" />
                            </a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <ul>
                            <li>
                                {% trans "Course" %}:
                                <span class="value">
                                    {% if group.course %}
                                    {{group.course.name}}
                                    {% else %}
                                    {% trans "Not assigned" %}
                                    {% endif %}
                                </span>
                            </li>
                            <li>
                                {% trans "Semester" %}:
                                <span class="value">{{group.semester.name}}</span>
                            </li>
                            <li>
                                {% trans "Owner(s)" %}:
                                <span class="value">{{group.owner_list}}</span>
                            </li>
                            <li>
                                {% trans "Member count" %}:
                                <span class="value">{{group.member_count}}</span>
                            </li>
                            <li>
                                &nbsp;
                                <span class="value">
                                    <a href="/group/show/{{group.id}}">{% trans "More details" %}</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </li>
                {% endfor %}
                {% else %}
                <div id="new-wm-tooltip">
                    <div id="new-wm-tooltip-container">
                        <p>{% trans "You have no groups." %}</p>
                        <p>
                            {% trans "Create a new one, and add your students to the new group." %}
                        </p>
                        <div id="new-wm-tooltip-tail"></div>
                    </div>
                </div>
                {% endif %}
                <li class="wm" 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="/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>
        </div>
    </div>
</div>