<%- include('partials/header', { username: username }) %> <div class="container my-5 custom-container"> <!-- <h2 class="text-center mb-4 custom-title">Topic</h2> --> <div class="card shadow-sm custom-card"> <div class="card-body"> <h5 class="card-title custom-card-title"> <%= project.project_name %> </h5> <p class="card-text custom-text"> <strong>Description:</strong> <%= project.description %> </p> <p class="card-text custom-text"> <strong>Owner:</strong> <%= project.ownerName %> </p> <!-- ปุ่ม Edit/Delete เฉพาะเจ้าของ --> <% if (project.user_id === userId) { %> <a href="/project/edit/<%= project.id %>" class="btn btn-sm btn-outline-warning custom-btn">Edit</a> <a href="/project/delete/<%= project.id %>" class="btn btn-sm btn-outline-danger custom-btn" onclick="return confirm('Are you sure you want to delete this project?');"> Delete </a> <% } %> <div class="d-flex justify-content-end mt-3"> <a href="/dashboard" class="btn btn-sm btn-outline-info custom-btn">Back to Dashboard</a> </div> </div> </div> <!-- แสดง Comments --> <div class="mt-4"> <h4 class="custom-comments-title">Comments</h4> <% if (comments && comments.length > 0) { %> <ul class="list-group custom-list-group"> <% comments.forEach(c => { %> <li class="list-group-item custom-list-item"> <strong><%= c.commentUser %>:</strong> <%= c.comment %> <span class="text-muted custom-comment-meta"> (Comment ID: <%= c.id %>) </span> <% if (c.user_id === userId) { %> <!-- ปุ่มลบคอมเมนต์เฉพาะเจ้าของ --> <a href="/comment/delete/<%= c.id %>" class="btn btn-sm btn-outline-danger float-right custom-btn" onclick="return confirm('Delete this comment?');"> Delete </a> <% } %> </li> <% }) %> </ul> <% } else { %> <p class="custom-text">No comments yet.</p> <% } %> </div> <!-- ฟอร์มเพิ่ม Comment --> <div class="card mt-4 custom-card"> <div class="card-body"> <form action="/project/<%= project.id %>/comment" method="POST"> <div class="form-group"> <label for="comment" class="custom-label">Add Comment:</label> <textarea class="form-control" name="comment" id="comment" rows="3" required></textarea> </div> <button type="submit" class="btn custom-submit-btn">Comment</button> </form> </div> </div> </div> <%- include('partials/footer') %> <!-- Inline CSS สำหรับการตกแต่งเพิ่มเติม --> <style> body { background-color: #f7f7f7; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .custom-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; padding: 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .custom-title { color: #EE4D2D; font-weight: 600; font-size: 2rem; } .custom-card { border: none; border-radius: 8px; } .custom-card-title { color: #EE4D2D; font-size: 1.8rem; font-weight: 600; } .custom-text { color: #555; font-size: 1rem; } .custom-btn { border-radius: 20px; margin-right: 5px; } .custom-list-group { margin-top: 15px; } .custom-list-item { background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 5px; padding: 10px; margin-bottom: 10px; } .custom-comment-meta { font-size: 0.8em; margin-left: 10px; } .custom-comments-title { color: #EE4D2D; font-weight: 600; margin-bottom: 15px; } .custom-label { font-weight: 600; color: #333; } .custom-submit-btn { background-color: #EE4D2D; color: #fff; border: none; border-radius: 20px; } .custom-submit-btn:hover { background-color: #d84315; } </style>