<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My account</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- 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" />
</head>
{% include 'navBar.twig' %}
<div class="content">
        <h1 class="text-center">Add words</h1>
        {% if userID is defined %}
        <form action="{{base}}/teacher/{{userID}}/addVocabList" method="POST" class="w-100">
            <table class="w-100 d-flex flex-column align-items-center">
                <tr>
                    <td colspan="2">
                        <input class="input-group-text w-100" type="text" name="listName" placeholder="list name" required>
                    </td>
                </tr>
                {% for i in 0..20 %}
                <tr>
                    <td><input class="input-group-text" type="text" name="frenchWord{{i}}" placeholder="french word"></td>
                    <td><input class="input-group-text" type="text" name="englishWord{{i}}" placeholder="english word"></td>
                </tr>
                {% endfor %}
                <tr class="d-flex justify-content-center"><td colspan="2"><input class="btn btn-primary" type="submit" value="Add"></td></tr>
            </table>
        </form>
        {% endif %}
</div>
</body>
</html>