<div class="container mt-5">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>Num</th>
            <th>Year</th>
            <th>Sector</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% if groups is defined %}
            {% for row in groups %}
                <tr {% if selectedGroup is defined and selectedGroup == row.id %}class="table-info"{% endif %}>
                    <td>{{ row.id }}</td>
                    <td>{{ row.num }}</td>
                    <td>{{ row.year }}</td>
                    <td>{{ row.sector }}</td>
                    <td>
                        {% if actions is defined %}
                            {% if 'showGroupDetails' in actions %}
                                <a href="{{ base }}/admin/{{ userID }}/showGroupDetails?selectedGroup={{ row.id }}" class="btn btn-primary">Show</a>
                            {% endif %}
                            {% if 'removeGroup' in actions %}
                                <a href="{{ base }}/admin/{{ userID }}/removeGroup?selectedGroup={{ row.id }}" class="btn btn-danger">Remove</a>
                            {% endif %}
                            {% if 'removeVocabFromGroup' in actions %}
                                <a href="{{ base }}/teacher/{{ userID }}/removeVocabFromGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-danger">Remove from group</a>
                            {% endif %}
                            {% if 'addVocabToGroup' in actions %}
                                <a href="{{ base }}/teacher/{{ userID }}/addVocabToGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-success">Add to group</a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        {% endif %}
        </tbody>
    </table>
</div>
