{% load i18n wiki_tags wiki_images_tags humanize wiki_thumbnails sekizai_tags %}
{% load url from future %}

{% addtoblock "js" %}
<script type="text/javascript">
function insert_image(image_id) {
  align=prompt('Enter an alignment. \'left\' or \'right\':', 'right');
  caption=prompt('Enter a caption text. You may use markdown. You can edit the text after...');
  imagetag = '\n[image:'+image_id+' align:'+align+']';
  if (! caption == '') {
    $('#id_content').insertAtCaret(imagetag+'\n    '+caption+'\n\n');
  } else {
    $('#id_content').insertAtCaret(imagetag+'\n\n');  
  }
}
</script>
{% endaddtoblock %}

{% with article|images_for_article as images %}
<style type="text/css">
  #image-list tr:first-child td {border:0;}
</style>
<div style="max-height: 300px; overflow: auto;">
  <table class="table" style="margin-bottom: 0;" id="image-list">
    {% for image in images %}
      {% with image.current_revision.imagerevision as revision %}
      {% thumbnail revision.image "50x50" crop="center" as thumb %}
        <tr>
          <td style="white-space: nowrap;">
            <p>{% trans "Image id" %}: {{ image.id }}</code></p>
            <p>
              <a href="javascript:void(insert_image({{ image.id }}))"><span class="fa fa-edit"></span> {% trans "Insert" %}</a><br />
              {% if image|can_write:user %}
              <a href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}"><span class="fa fa-upload"></span> {% trans "Replace" %}</a>
              {% endif %}
            </p>
          </td>
          <td>
            <div class="thumbnail">
              <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
            </div>
          </td>
        </tr>
      {% endthumbnail %}
      {% endwith %}
    {% empty %}
    <tr>
      <td><em>{% trans "No images found for this article" %}</em></td>
    </tr>
    {% endfor %}
  </table>
</div>

{% if images %}
<p>
  <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}">
    {% trans "Manage images" %} &raquo;
  </a>
</p>
{% endif %}
<hr />

<h4>{% trans "Add new image" %}</h4>

{% if article|images_can_add:user %}
  {% if form.non_field_errors %}
    {% if form_error_title %}<h4 class="alert-heading">{{ form_error_title }}</h4>{% endif %}
    {% for error_message in form.non_field_errors %}
      <div class="alert alert-block alert-error">
        {{ error_message }}
      </div>    
    {% endfor %}
  {% endif %}

  {# Include the hidden fields #}
  {% for hidden in form.hidden_fields %}
    {{ hidden }}
  {% endfor %}

  {% for field in form.visible_fields %}
    <fieldset id="div_{{ field.auto_id }}" class="control-group fields {% if field.errors %} error{% endif %}">
      {% if field.label %}
        <!--<label for="{{ field.id_for_label }}" class="{% if field.field.required %}requiredField{% endif %}">
        {{ field.label|safe }}
        </label>-->
      {% endif %}
      {{ field }}
      {% if field.errors %}
      <div id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="help-block">
        {% for error in field.errors %}
        <div>{{ error }}</div>
        {% endfor %}
      </div>
      {% endif %}
    </fieldset>
    {% if field.help_text %}
      <p id="hint_{{ field.auto_id }}" class="help-block">{{ field.help_text|safe }}</p>
    {% endif %}
  {% endfor %}

  <p>
    <button type="submit" name="{{ plugin.slug }}_save" value="1" class="btn btn-default btn-lg">
      <span class="fa fa-upload"></span>
      {% trans "Add image" %}
    </button>
  </p>
{% else %}
  
  {% if user.is_anonymous %}
    {% include "wiki/includes/anonymous_blocked.html" %}
  {% else %}
    <p><em>{% trans "You do not have permissions to add images." %}</em></p>
  {% endif %}
{% endif %}

<hr />

<h4>
  {% trans "How to use images" %}
</h4>

<p>{% trans "After uploading an image, it is attached to this particular artice and can be used only here. Other users may replace the image, but older versions are kept. You probably want to show the image with a nice caption. To achieve this, press the Insert button and fill in the caption fields and possibly choose to have you image floating right or left of the content. You can use Markdown in the caption. The markdown code syntax for images looks like this, possible values for align are left and right:" %}<br />
<pre>[image:id align:right]
    caption indented by 4 spaces</pre>
</p>


{% endwith %}
