+<script>
+ function showReply(comment_id) {
+ YAHOO.util.Dom.setStyle('replyForm' + comment_id, 'display', 'block');
+ YAHOO.util.Dom.setStyle('replyLink' + comment_id, 'display', 'none');
+ }
+
+ function hideReply(comment_id) {
+ YAHOO.util.Dom.setStyle('replyForm' + comment_id, 'display', 'none');
+ YAHOO.util.Dom.setStyle('replyLink' + comment_id, 'display', 'block');
+ }
+</script>
+
+<h2>{% trans "Comments" %}</h2>
+{% if comments %}
+ {% for comment in comments %}
+ <div style="margin-left: {{ comment.depth }}em;" class="comment">
+ {{ comment.user }} said:<br/>
+ {% auto_transform_markup comment %}
+ <p style="display:none;" id="replyLink{{comment.id}}"><a href="javascript:showReply('{{comment.id}}');">Reply to this comment</a></p>
+ <div id="replyForm{{comment.id}}" class="commentReplyForm">
+ <script>hideReply('{{comment.id}}');</script>
+ <form method="POST" action="{% get_comment_url object comment %}">
+ <p><a href="javascript:hideReply('{{comment.id}}');">Cancel reply</a></p>
+ <ul>
+ <table>
+ {{ comment.get_reply_form.as_table }}
+ </table>
+ <input type="submit" value="{% trans "Reply to this comment" %}" /></li>
+ </ul>
+ </form>
+ </div>
+ </div>
+ {% endfor %}
+{% else %}
+ {% trans "No comments were added yet" %}
+{% endif %}
+
+<p style="display:none;" id="replyLink"><a href="javascript:showReply('')">Add comment</a></p>
+<div id="replyForm">
+<script>hideReply('')</script>
+<h3>{% trans "Add comment" %}<h3>
+<form method="POST" action="{% get_comment_url object %}">
+ <p><a href="javascript:hideReply('')">Cancel comment</a></p>
+ <ul>
+ <table>
+ {{ comment_form.as_table }}
+ </table>
+ <input type="submit" value="{% trans "Add comment" %}" /></li>
+ {# <input type="submit" name="preview" value="{% trans "Preview comment" %}" /></li> #}
+ </ul>
+</form>
+</div>