<%- include('navbar.ejs') %>

    <style>
        body {
            background: linear-gradient(135deg, #eef2ff, #f8fafc);
            font-family: 'Inter', sans-serif;
        }

        .edit-container {
            padding: 50px 20px;
        }

        .edit-card {
            max-width: 720px;
            margin: auto;
            background: #ffffff;
            border-radius: 24px;
            padding: 45px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        .edit-card::before {
            content: "";
            position: absolute;
            top: -80px;
            right: -80px;
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            border-radius: 50%;
            opacity: 0.08;
        }

        .edit-title {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 8px;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .edit-sub {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 35px;
        }

        /* Floating Input */

        .input-group-modern {
            position: relative;
            margin-bottom: 28px;
        }

        .input-group-modern input,
        .input-group-modern textarea {
            width: 100%;
            padding: 18px 16px;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            font-size: 14px;
            transition: 0.3s;
            background: #fff;
        }

        .input-group-modern textarea {
            resize: none;
        }

        .input-group-modern label {
            position: absolute;
            top: 18px;
            left: 16px;
            font-size: 14px;
            color: #9ca3af;
            transition: 0.3s;
            pointer-events: none;
        }

        .input-group-modern input:focus,
        .input-group-modern textarea:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
            outline: none;
        }

        .input-group-modern input:focus+label,
        .input-group-modern input:not(:placeholder-shown)+label,
        .input-group-modern textarea:focus+label,
        .input-group-modern textarea:not(:placeholder-shown)+label {
            top: -8px;
            left: 12px;
            font-size: 11px;
            color: #6366f1;
            background: #fff;
            padding: 0 6px;
        }

        /* Buttons */

        .btn-update {
            padding: 12px 28px;
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            transition: 0.3s;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
        }

        .btn-update:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(236, 72, 153, 0.4);
        }

        .btn-cancel {
            padding: 12px 22px;
            border-radius: 14px;
            background: #f3f4f6;
            border: none;
            font-weight: 600;
            font-size: 14px;
            color: #374151;
            transition: 0.3s;
        }

        .btn-cancel:hover {
            background: #e5e7eb;
        }
    </style>

    <div class="edit-container">

        <div class="edit-card">

            <div class="edit-title">✏️ Edit Course</div>
            <div class="edit-sub">Update course information in your LMS system</div>

            <form action="/admin/update-course" method="post">

                <input type="hidden" name="course_id" value="<%= course.course_id %>">

                <div class="input-group-modern">
                    <input type="text" name="course_name" value="<%= course.course_name %>" placeholder=" " required>
                    <label>Course Name</label>
                </div>

                <div class="input-group-modern">
                    <textarea name="course_description" rows="4"
                        placeholder=" "><%= course.course_description %></textarea>
                    <label>Course Description</label>
                </div>

                <div class="d-flex gap-3 mt-4">

                    <button type="submit" class="btn-update">
                        <i class="fa fa-save"></i> Update Course
                    </button>

                    <a href="/admin/courses-list" class="btn-cancel ml-3">
                        Cancel
                    </a>

                </div>

            </form>

        </div>

    </div>

    <%- include('footer.ejs') %>