<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage Vocabulary List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
        <link
                href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
                rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{{base}}/css/styles.css" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
</head>
<body>
{% include 'navBar.twig' %}
<div class="content">
    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
        <h2>My lists</h2>
        {% include 'vocabularyContainer.twig' with {'actions' : ['affAllVocab', 'delById', 'getContent' ], 'vocabularies' : vocabularies, 'vocabID' : vocabID, 'content' : content } %}
    </div>
    <div class="d-flex justify-content-center">
        <a href="{{base}}/teacher/{{userID}}/showVocabListForm" class="btn btn-primary">Add a new list</a>
    </div>
    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
        <h2>Content</h2>
        {% if content is defined %}
        <table class="table table-bordered">
            <thead>
                <th>French word</th>
                <th>English word</th>
            </thead>
            {% for trad in content %}
            <tr>
                <td>{{trad.word1}}</td>
                <td>{{trad.word2}}</td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}
    </div>
    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
        <h2>Groups with vocab</h2>
        {% if vocabID is defined %}
        {% include 'groupContainer.twig' with {'actions' : 'removeVocabFromGroup', groups : groupsVocab } %}
        {% endif %}
    </div>

    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
        <h2>Groups without vocab</h2>
        {% if groupsNoVocab is defined and vocabID is defined %}
        {% include 'groupContainer.twig' with {'actions' : 'addVocabToGroup', groups : groupsNoVocab } %}
        {% endif %}
    </div>
</div>
</body>
</html>
