{% load i18n %}
{% load djblets_utils %}
{% load reviewtags %}
{% load difftags %}
<div id="review-form-comments" class="review">
 <p><input id="id_shipit" class="recommendation" type="checkbox" {% if review.ship_it %}checked="checked"{% endif %} /> <label for="id_shipit">{% trans "Ship It" %}</label></p>
 <pre class="body-top editable">{{review.body_top}}</pre>

 <div class="comments">
{% if review.comments.all or review.screenshot_comments.all or review.file_attachment_comments.all %}
  <dl class="diff-comments">
{% for comment in review.screenshot_comments.all %}
   <dt>
    <div class="screenshot">
     <span class="filename">
      <a href="{{comment.screenshot.get_absolute_url}}">{% if comment.screenshot.caption %}{{comment.screenshot.caption}}{% else %}{{comment.screenshot.image.name|basename}}{% endif %}</a>
     </span>
     {{comment.image|safe}}
    </div>
   </dt>
   <dd>
    <pre class="editable comment-editable" id="screenshot-comment-{{comment.id}}">{{comment.text|escape}}</pre>
    <input type="checkbox" id="screenshot-comment-issue-{{comment.id}}" {% if comment.issue_opened %}checked="checked"{% endif %}/>
    <label for="screenshot-comment-issue-{{comment.id}}">Open an issue</label>

{% comment %}
    <!-- We'll want to do this eventually... Need to make it work in a
         non-instant-apply world. -->

    <ul class="controls">
     <li><a href="#" id="delete-screenshot-comment-{{comment.id}}">{% trans "Delete comment" %}</a></li>
    </ul>
{% endcomment %}

    <script type="text/javascript">
        var comment = gReviewRequest.createReview().createScreenshotComment(
            {{comment.id}}, {{comment.screenshot.id}},
            {{comment.x}}, {{comment.y}}, {{comment.w}}, {{comment.h}});
        comment.ready(function() {});
        var editor = $("#screenshot-comment-{{comment.id}}")
            .reviewFormCommentEditor(comment);
        $("#edit-screenshot-comment-{{comment.id}}").click(function() {
            editor.inlineEditor("startEdit");
        });
    </script>
   </dd>
{% endfor %}

{% for comment in review.file_attachment_comments.all %}
   <dt>
    <div class="file-attachment">
      <a href="{{comment.file_attachment.get_absolute_url}}">
       <img src="{{comment.file_attachment.icon_url}}" />
       <span class="filename">{{comment.file_attachment.filename}}</span>
      </a>
    </div>
   </dt>
   <dd>
    <pre class="editable comment-editable" id="file-comment-{{comment.id}}">{{comment.text|escape}}</pre>
    <input type="checkbox" id="file-comment-issue-{{comment.id}}" {% if comment.issue_opened %}checked="checked"{% endif %}/>
    <label for="file-comment-issue-{{comment.id}}">Open an issue</label>

{% comment %}
    <!-- We'll want to do this eventually... Need to make it work in a
         non-instant-apply world. -->

    <ul class="controls">
     <li><a href="#" id="delete-file-comment-{{comment.id}}">{% trans "Delete comment" %}</a></li>
    </ul>
{% endcomment %}

    <script type="text/javascript">
        var comment = gReviewRequest.createReview().createFileAttachmentComment(
            {{comment.id}}, {{comment.file_attachment.id}});
        comment.ready(function() {});
        var editor = $("#file-comment-{{comment.id}}")
            .reviewFormCommentEditor(comment);
        $("#edit-file-comment-{{comment.id}}").click(function() {
            editor.inlineEditor("startEdit");
        });
    </script>
   </dd>
{% endfor %}

{% for comment in review.ordered_comments %}
   <dt>
    <div id="review_draft_comment_container_{{comment.id}}">
     <table class="sidebyside loading">
      <thead>
       <tr>
        <th class="filename">
         <a name="{{comment.get_absolute_url}}">{{comment.filediff.dest_file_display}}</a>
         <span class="diffrevision">
{% if comment.interfilediff %}
          (Diff revisions {{comment.filediff.diffset.revision}} - {{comment.interfilediff.diffset.revision}})
{% else %}
          (Diff revision {{comment.filediff.diffset.revision}})
{% endif %}
         </span>
        </th>
       </tr>
      </thead>
      <tbody>
{% for i in comment.num_lines|default_if_none:1|range %}
       <tr><td><pre>&nbsp;</pre></td></tr>
{% endfor %}
      </tbody>
     </table>
    </div>
   </dt>
   <dd>
    <pre class="editable comment-editable" id="diff-comment-{{comment.id}}">{{comment.text|escape}}</pre>
    <input type="checkbox" id="diff-comment-issue-{{comment.id}}" {% if comment.issue_opened %}checked="checked"{% endif %}/>
    <label for="diff-comment-issue-{{comment.id}}">Open an issue</label>

{% comment %}
    <!-- We'll want to do this eventually... Need to make it work in a
         non-instant-apply world. -->

    <ul class="controls">
     <li><a href="#" id="delete-diff-comment-{{comment.id}}">{% trans "Delete comment" %}</a></li>
    </ul>
{% endcomment %}

    <script type="text/javascript">
        var comment = gReviewRequest.createReview().createDiffComment(
            {{comment.id}},
            {
                'id': {{comment.filediff.id}},
                'revision': {{comment.filediff.diffset.revision}}
            },
{% if comment.interfilediff %}
            {
                'id': {{comment.interfilediff.id}},
                'revision': {{comment.interfilediff.diffset.revision}}
            },
{% else %}
            null,
{% endif %}
            {{comment.first_line}}, {{comment.last_line}});
        comment.ready(function() {});

        var editor = $("#diff-comment-{{comment.id}}")
            .reviewFormCommentEditor(comment);
        $("#edit-diff-comment-{{comment.id}}").click(function() {
            editor.inlineEditor("startEdit");
        });

        RB.queueLoadDiffFragment("review_draft_diff_comments", "{{comment.id}}",
{% if comment.interfilediff %}
          "{{comment.filediff.id}}-{{comment.interfilediff.id}}"
{% else %}
          "{{comment.filediff.id}}"
{% endif %}
        );
    </script>
   </dd>
{% endfor %}
  </dl>
 </div>

 <pre class="body-bottom editable">{{review.body_bottom}}</pre>
{% endif %}

</div>
