<%- include('navbar.ejs') %>

    <style>
        .quiz-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            max-width: 750px;
            margin: auto;
        }

        .header-gradient {
            background: linear-gradient(90deg, #4e73df, #224abe);
            color: white;
            padding: 18px 25px;
            border-radius: 18px 18px 0 0;
            margin-bottom: 30px;
            font-size: 18px;
            font-weight: 500;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 6px;
            display: block;
            color: #444;
        }

        .form-control-custom {
            width: 100%;
            padding: 12px 15px;
            border-radius: 12px;
            border: 1px solid #ddd;
            transition: 0.3s ease;
            font-size: 14px;
        }

        .form-control-custom:focus {
            border-color: #4e73df;
            box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.12);
            outline: none;
        }

        .duration-wrapper {
            position: relative;
        }

        .duration-wrapper i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
        }

        .btn-create {
            background: linear-gradient(45deg, #4e73df, #224abe);
            border: none;
            border-radius: 30px;
            padding: 12px 35px;
            color: #fff;
            font-weight: 500;
            transition: 0.3s ease;
            font-size: 15px;
        }

        .btn-create:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(78, 115, 223, 0.3);
        }
    </style>

    <div class="container-fluid mt-4">

        <div class="quiz-card">

            <div class="header-gradient">
                Create New Quiz
            </div>

            <form action="/admin/save-quiz" method="POST">

                <!-- Course -->
                <div class="form-group">
                    <label class="form-label">Select Course</label>
                    <select name="course_id" class="form-control-custom" required>
                        <option value="">-- Select Course --</option>
                        <% courses.forEach(course=> { %>
                            <option value="<%= course.course_id %>">
                                <%= course.course_name %>
                            </option>
                            <% }) %>
                    </select>
                </div>

                <!-- Quiz Title -->
                <div class="form-group">
                    <label class="form-label">Quiz Title</label>
                    <input type="text" name="quiz_title" class="form-control-custom" placeholder="Enter Quiz Title"
                        required>
                </div>

                <!-- Button -->
                <div class="text-end">
                    <button type="submit" class="btn-create">
                        Create Quiz
                    </button>
                </div>

            </form>

        </div>

    </div>

    <%- include('footer.ejs') %>