| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html xmlns:th="http://www.thymeleaf.org">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <title>My Courses</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 | <div class="container mt-5">
|
|---|
| 10 |
|
|---|
| 11 | <!-- Back to Home link -->
|
|---|
| 12 | <div class="mb-3">
|
|---|
| 13 | <a class="btn btn-outline-secondary" th:href="@{/}">← Back to Home</a>
|
|---|
| 14 | </div>
|
|---|
| 15 |
|
|---|
| 16 | <div class="d-flex justify-content-between align-items-center mb-4">
|
|---|
| 17 | <h1>My Courses</h1>
|
|---|
| 18 | <a class="btn btn-primary" th:href="@{/add/course}">Add New Course</a>
|
|---|
| 19 | </div>
|
|---|
| 20 |
|
|---|
| 21 | <div class="row">
|
|---|
| 22 | <div class="col-md-4 mb-3" th:each="course : ${courses}">
|
|---|
| 23 | <div class="card h-100 shadow-sm">
|
|---|
| 24 | <div class="card-body">
|
|---|
| 25 | <h5 class="card-title" th:text="${course.name}">Course Name</h5>
|
|---|
| 26 | <p class="card-text">Price: <span th:text="${course.price}">100</span> €</p>
|
|---|
| 27 |
|
|---|
| 28 | <!-- Multiple categories -->
|
|---|
| 29 | <p class="card-text">
|
|---|
| 30 | Categories:
|
|---|
| 31 | <span th:each="cat, iterStat : ${course.categories}">
|
|---|
| 32 | <span th:text="${cat.name}">Category</span>
|
|---|
| 33 | <span th:if="${!iterStat.last}">, </span>
|
|---|
| 34 | </span>
|
|---|
| 35 | </p>
|
|---|
| 36 |
|
|---|
| 37 | <p class="card-text">
|
|---|
| 38 | Status: <span th:text="${course.status}">Available</span>
|
|---|
| 39 | </p>
|
|---|
| 40 | <div class="d-flex gap-2 mt-3 flex-wrap">
|
|---|
| 41 |
|
|---|
| 42 | <!-- Modules button -->
|
|---|
| 43 | <a th:href="@{/module/{courseId}(courseId=${course.courseId})}"
|
|---|
| 44 | class="btn btn-sm btn-info text-white">
|
|---|
| 45 | Modules
|
|---|
| 46 | </a>
|
|---|
| 47 |
|
|---|
| 48 | <a th:href="@{'/edit/course/' + ${course.courseId}}" class="btn btn-sm btn-warning">Edit</a>
|
|---|
| 49 |
|
|---|
| 50 | <form th:action="@{'/delete/course/' + ${course.courseId}}" method="post"
|
|---|
| 51 | th:onsubmit="return confirm('Are you sure?');">
|
|---|
| 52 | <button class="btn btn-sm btn-danger">Delete</button>
|
|---|
| 53 | </form>
|
|---|
| 54 |
|
|---|
| 55 | <form th:action="@{'/change-status/course/' + ${course.courseId}}" method="post">
|
|---|
| 56 | <button class="btn btn-sm btn-secondary"
|
|---|
| 57 | th:text="${course.status == 'Available'} ? 'Make Unavailable' : 'Make Available'">
|
|---|
| 58 | Make Unavailable
|
|---|
| 59 | </button>
|
|---|
| 60 | </form>
|
|---|
| 61 |
|
|---|
| 62 | </div>
|
|---|
| 63 |
|
|---|
| 64 | </div>
|
|---|
| 65 | </div>
|
|---|
| 66 | </div>
|
|---|
| 67 | </div>
|
|---|
| 68 | </div>
|
|---|
| 69 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|---|
| 70 | </body>
|
|---|
| 71 | </html>
|
|---|
