<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
      class="no-js" lang="ko">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>InterviewSubscription</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS here -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/css/magnific-popup.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/themify-icons.css">
    <link rel="stylesheet" href="/static/css/nice-select.css">
    <link rel="stylesheet" href="/static/css/flaticon.css">
    <link rel="stylesheet" href="/static/css/gijgo.css">
    <link rel="stylesheet" href="/static/css/animate.css">
    <link rel="stylesheet" href="/static/css/slicknav.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/combobox.css">

</head>

<body>

<section class="contact-section">
    <div class="container">
        <div class="row">
            <div class="col-12x">
                <h2 class="contact-title">Add User</h2>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <div class="combo-dropdown">
                                <div class="select">
                                    <span>Select QuizLevel</span>
                                    <i class="fa fa-chevron-left"></i>
                                    <input type="hidden" id="quiz-level">
                                </div>
                                <ul class="combo-dropdown-menu" id="quiz-level-dropdown">
                                    <li th:each="quizLevel:${quizLevelList}" th:text="${quizLevel.code}"
                                        th:id="${quizLevel.code}" th:name="${quizLevel.code}">Quiz Level
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <input class="form-control" name="email" id="email" type="text"
                                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'"
                                   placeholder="Enter email">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <input class="form-control" name="quizSize" id="quizSize" type="number"
                                   th:min="${minQuizSize}" step="1" th:max="${maxQuizSize}"
                                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter quizSize'"
                                   placeholder="Enter quizSize">
                        </div>
                    </div>
                    <div class="col-sm-6" id="quiz-day-set">
                        <div th:each="quizDay:${quizDayList}" >
                            <input type="checkbox" th:text="${quizDay.code}"
                                   th:id="${quizDay.code}"
                                   th:name="${quizDay.code}" th:value="${quizDay.code}" checked>
                            </br>
                        </div>

                    </div>
                    <div class="col-sm-6" id="quiz-category-set">
                        <div th:each="quizCategory:${quizCategoryList}">
                            <input type="checkbox" th:text="${quizCategory.code}"
                                   th:id="${quizCategory.code}"
                                   th:name="${quizCategory.code}" th:value="${quizCategory.code}" checked>
                            <br/>
                        </div>

                    </div>
                </div>
                <div class="form-group mt-3">
                    <button type="submit" class="button boxed-btn" id="btn-add-user">Add</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JS here -->
<script src="/static/js/common/jquery-1.12.4.min.js"></script>
<script src="/static/js/common/combobox.js"></script>
<script src="/static/js/user/add.js"></script>

</body>

</html>