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