<style type="text/css">
.comment {
  font-size: 90%;
}




.comment_body {
  background: #eeeeff;
}


.comment_header {
  opacity: 0.75;
}

.comment_id {
  float: right;
  opacity: 0.3;
  font-size: 60%;
}

.comment_name {
  font-weight: bolder;
}


.comment_date {
  opacity: 0.75;
}

.comment_thanks {
  color: darkblue;
  margin-left: 1em;
  font-style: italic;
  font-weight: bolder;
}

.comment_error {
  padding-left: 1em;
  font-weight: bolder;
  font-size: 80%;
  color: darkred;
}
</style>

{% ifequal length 1 %}
  <a class="commenttoggle" id="toggle_{{ id }}"
      onclick="return toggleComment('{{ id }}')"
      href="comments: show / hide">{{ length }} comments</a>
{% else %}
  {% if length %}
    <a class="commenttoggle" id="toggle_{{ id }}"
      onclick="return toggleComment('{{ id }}')"
      href="comments: show / hide">{{ length }} comments</a>
  {% else %}
    <a class="commenttoggle" id="toggle_{{ id }}"
      onclick="return toggleComment('{{ id }}')"
      href="comments: show / hide">0 comments</a>
    <span class="comment" {% if not newid %} style="display: none;" {% endif %}>
      <span class="comment_body">Be the first to comment on this paragraph!</span>
    </span>
  {% endif %}
{% endifequal %}
{% for c in query %}
  <span class="{% ifequal c.id newid %}new_{% endifequal %}comment"
      {% if not newid %} style="display: none;" {% endif %}
    id="comment{{ c.id }}">
    <a name="comment{{ c.id }}"/>
    <span class="comment_header">
    </span>
    <div class="comment_body">{{ forloop.counter }}   {{ c.submitter_name }}  {{ c.comment|escape|linebreaks }}</div>
  </span>
{% endfor %}
<form class="comment" id="form_{{ paragraph_id }}" action="/submit/{{  paragraph_id }}/"
    method="post" >
  <table>
    <tbody>
      <tr><td align="right" valign="top">Comment<br></td>
	  <td>{{ form.comment }}</td></tr>
      <tr><td align="right">Your name</td><td>{{ form.name }}
	    <span class="comment_help"><b>Required</b> so we can give you credit</a></span></td></tr>
      <tr><td align="right">Your URL</td><td>{{ form.url }}
	    <span class="comment_help"><b>Optional</b> link to blog, home page,
	      <i>etc</i>.</span></td></tr>
      <tr><td align="right">Remember you?</td><td>{{ form.remember }}</td></tr>
      <tr><td/><td><input name="submit" type="submit"
	      value="Submit Comment"/><span class="comment_error">{{ error }}</span></td></tr>
    </tbody>
  </table>
</form>