| [5ea00d7] | 1 | <!DOCTYPE html>
|
|---|
| 2 | <html xmlns:th="http://www.thymeleaf.org">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <title th:text="${course.name}">Course View</title>
|
|---|
| 6 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|---|
| 7 | </head>
|
|---|
| 8 | <body>
|
|---|
| 9 |
|
|---|
| 10 | <div class="container mt-5">
|
|---|
| 11 |
|
|---|
| 12 | <!-- Back to Home -->
|
|---|
| 13 | <a th:href="@{/}" class="btn btn-secondary mb-4">⬅ Back to Home</a>
|
|---|
| 14 |
|
|---|
| 15 | <!-- Course Info -->
|
|---|
| 16 | <div class="mb-4">
|
|---|
| 17 | <h1 class="fw-bold" th:text="${course.name}">Course Name</h1>
|
|---|
| 18 | </div>
|
|---|
| 19 |
|
|---|
| 20 | <!-- Modules + Lessons -->
|
|---|
| 21 | <div th:if="${modules != null and !modules.isEmpty()}">
|
|---|
| 22 |
|
|---|
| 23 | <div class="accordion" id="modulesAccordion">
|
|---|
| 24 |
|
|---|
| 25 | <div class="accordion-item mb-2 shadow-sm"
|
|---|
| 26 | th:each="m, iterStat : ${modules}">
|
|---|
| 27 |
|
|---|
| 28 | <h2 class="accordion-header" th:attr="id='heading-' + ${iterStat.index}">
|
|---|
| 29 | <button class="accordion-button collapsed fw-semibold"
|
|---|
| 30 | type="button"
|
|---|
| 31 | data-bs-toggle="collapse"
|
|---|
| 32 | th:attr="data-bs-target='#collapse-' + ${iterStat.index}"
|
|---|
| 33 | aria-expanded="false"
|
|---|
| 34 | th:attrappend="aria-controls='collapse-' + ${iterStat.index}">
|
|---|
| 35 | <span th:text="${m.title}">Module Title</span>
|
|---|
| 36 | </button>
|
|---|
| 37 | </h2>
|
|---|
| 38 |
|
|---|
| 39 | <div class="accordion-collapse collapse"
|
|---|
| 40 | th:attr="id='collapse-' + ${iterStat.index}"
|
|---|
| 41 | th:attrappend="aria-labelledby='heading-' + ${iterStat.index}"
|
|---|
| 42 | data-bs-parent="#modulesAccordion">
|
|---|
| 43 |
|
|---|
| 44 | <div class="accordion-body">
|
|---|
| 45 |
|
|---|
| 46 | <!-- Module Description -->
|
|---|
| 47 | <p class="text-muted mb-3" th:text="${m.description}">
|
|---|
| 48 | Module description...
|
|---|
| 49 | </p>
|
|---|
| 50 |
|
|---|
| 51 | <!-- Lessons -->
|
|---|
| 52 | <h5 class="mb-3">📚 Lessons</h5>
|
|---|
| 53 |
|
|---|
| 54 | <div th:if="${m.lessons != null and !m.lessons.isEmpty()}">
|
|---|
| 55 | <ul class="list-group">
|
|---|
| 56 | <li class="list-group-item"
|
|---|
| 57 | th:each="l : ${m.lessons}">
|
|---|
| 58 | <div class="d-flex justify-content-between align-items-center">
|
|---|
| 59 | <div>
|
|---|
| 60 | <strong th:text="${l.title}">Lesson Title</strong>
|
|---|
| 61 | <p class="mb-0 text-muted small"
|
|---|
| 62 | th:text="${#strings.abbreviate(l.material, 120)}">
|
|---|
| 63 | Lesson material preview...
|
|---|
| 64 | </p>
|
|---|
| 65 | </div>
|
|---|
| 66 | </div>
|
|---|
| 67 | </li>
|
|---|
| 68 | </ul>
|
|---|
| 69 | </div>
|
|---|
| 70 |
|
|---|
| 71 | <!-- Empty Lessons -->
|
|---|
| 72 | <div th:if="${m.lessons == null or m.lessons.isEmpty()}"
|
|---|
| 73 | class="alert alert-info text-center mb-0">
|
|---|
| 74 | No lessons found for this module.
|
|---|
| 75 | </div>
|
|---|
| 76 |
|
|---|
| 77 | </div>
|
|---|
| 78 | </div>
|
|---|
| 79 |
|
|---|
| 80 | </div>
|
|---|
| 81 | </div>
|
|---|
| 82 | </div>
|
|---|
| 83 |
|
|---|
| 84 | <!-- Empty Modules -->
|
|---|
| 85 | <div th:if="${modules == null or modules.isEmpty()}" class="alert alert-warning text-center">
|
|---|
| 86 | No modules found for this course.
|
|---|
| 87 | </div>
|
|---|
| 88 |
|
|---|
| 89 | <!-- Certificate or Complete Button -->
|
|---|
| 90 | <div class="mt-4 text-center">
|
|---|
| 91 | <!-- If certificate exists -->
|
|---|
| 92 | <div th:if="${certificate != null}">
|
|---|
| 93 | <div class="alert alert-success fw-bold mb-3">
|
|---|
| 94 | ✅ Your course is completed!
|
|---|
| 95 | </div>
|
|---|
| 96 | <div class="card shadow-sm mx-auto" style="max-width: 600px;">
|
|---|
| 97 | <div class="card-body">
|
|---|
| 98 | <h5 class="card-title">Certificate</h5>
|
|---|
| 99 | <p class="card-text mb-1"><strong>Certificate Code:</strong> <span th:text="${certificate.certificateCode}"></span></p>
|
|---|
| 100 | <p class="card-text mb-0"><strong>Issue Date:</strong> <span th:text="${certificate.issueDate}"></span></p>
|
|---|
| 101 | </div>
|
|---|
| 102 | </div>
|
|---|
| 103 | </div>
|
|---|
| 104 |
|
|---|
| 105 | <!-- If no certificate -->
|
|---|
| 106 | <div th:if="${certificate == null}">
|
|---|
| 107 | <form th:action="@{/course/complete/{id}(id=${course.courseId})}" method="post">
|
|---|
| 108 | <button type="submit" class="btn btn-success btn-lg">✅ Complete Course</button>
|
|---|
| 109 | </form>
|
|---|
| 110 | </div>
|
|---|
| 111 | </div>
|
|---|
| 112 |
|
|---|
| 113 | </div>
|
|---|
| 114 |
|
|---|
| 115 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|---|
| 116 | </body>
|
|---|
| 117 | </html>
|
|---|
