-<h2><%- I18n.t('javascripts.notes.show.title', { id: note.id }) %></h2>
-<% note.comments.forEach(function (comment) { %>
-<p>
- <small class="deemphasize">
- <%- I18n.t('javascripts.notes.show.event', {
- action: comment.action, user: comment.user, time: comment.date
- }) %>
- </small>
- <br/>
- <%- comment.text %>
-</p>
-<% }) %>
-<% if (note.status == "open") { %>
-<form action="#">
- <textarea name="text" cols="40" rows="5"></textarea>
- <br/>
- <input type="submit" name="close" value="<%- I18n.t('javascripts.notes.show.close') %>" id="note-close">
- <input type="submit" name="comment" value="<%- I18n.t('javascripts.notes.show.comment') %>" id="note-comment">
-</form>
-<% } %>
+<div class="note">
+ <h2><%- I18n.t('javascripts.notes.show.title', { id: note.id }) %></h2>
+ <% note.comments.forEach(function (comment) { %>
+ <div>
+ <small class="deemphasize">
+ <% if (comment.user) { %>
+ <%= I18n.t('javascripts.notes.show.' + comment.action + '_by', {
+ user: comment.user, user_url: comment.user_url,
+ time: I18n.l("time.formats.long", comment.date)
+ }) %>
+ <% } else { %>
+ <%- I18n.t('javascripts.notes.show.' + comment.action + '_by_anonymous', {
+ time: I18n.l("time.formats.long", comment.date)
+ }) %>
+ <% } %>
+ </small>
+ <div class="comment_body"><%= comment.html %></div>
+ </div>
+ <% }) %>
+ <% if (note.status == "open") { %>
+ <form action="#">
+ <textarea class="comment" name="text" cols="40" rows="5"></textarea>
+ <br/>
+ <div class="buttons">
+ <input type="submit" name="close" value="<%- I18n.t('javascripts.notes.show.close') %>" data-url="<%- note.close_url %>">
+ <input type="submit" name="comment" value="<%- I18n.t('javascripts.notes.show.comment') %>" data-url="<%- note.comment_url %>" disabled="1">
+ </div>
+ </form>
+ <% } %>
+</div>