<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <body>
        <th:block th:fragment="exam-upload-students">
            <div class="surface p-0">
                <script type="text/javascript" src="/webjars/codemirror/5.62.2/lib/codemirror.js"></script>
                <link rel="stylesheet" type="text/css" href="/webjars/codemirror/5.62.2/lib/codemirror.css" />

                <h3 class="surface__header">Force students to be reviewed</h3>

                <div class="surface__content flex vertical gap-5">
                    <p>These students will be given priority when doing exam reviews</p>

                    <form
                        th:action="@{/lab/{editionId}/import(editionId=${qSession.id})}"
                        enctype="multipart/form-data"
                        class="flex vertical gap-3"
                        method="post">
                        <div>
                            <input aria-label="CSV file" type="file" id="csv" name="file" class="csvfile" />
                        </div>

                        <div>
                            <button type="submit" class="button" data-style="outlined" name="storeTA">Import students</button>
                        </div>

                        <div>
                            The CSV should look like:
                            <br />
                            <div id="csvExample"></div>
                        </div>
                        <script>
                            $(function () {
                                let csvExample = CodeMirror(document.getElementById("csvExample"), {
                                    value: " name \n netid1\n netid2",
                                    mode: "mathematica",
                                    lineNumbers: true,
                                    readOnly: true,
                                });
                                csvExample.setSize("100%", "100%");
                            });
                        </script>
                    </form>
                </div>
            </div>
        </th:block>
    </body>
</html>
