<%- 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>