{% load i18n wiki_tags wiki_images_tags humanize wiki_thumbnails sekizai_tags %}


{% addtoblock "js" %}
<script type="text/javascript">
function insert_image(data) {
    if (typeof data == "number") {
        image_id = data;
        $("#img_title").text(" {{ _("Insert Image")|escapejs }} " + image_id);
        $("#img_modal").on('shown.bs.modal', function(){
            $(this).find('#img_caption').focus();
        });
        $("#img_modal").modal();
   } else {
        align = data.img_align.options[data.img_align.selectedIndex].text;
        size = data.img_size.options[data.img_size.selectedIndex].text;
        caption = data.img_caption.value;

        data.img_align.selectedIndex = 0;
        data.img_size.selectedIndex = 0;
        data.img_caption.value = "";

        tag = '\n[image:'+image_id;
        if (align != "center") tag = tag + ' align:'+align;
        if (size != "default") tag = tag + ' size:'+size;

        if (caption == '')
            $('#id_content').insertAtCaret(tag+']\n\n');
        else
            $('#id_content').insertAtCaret(tag+']\n    '+caption+'\n\n');
    }
}
function add_image(form) {
    $(form).submit();
}
</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;">
  <div class="card">
    {% for image in images %}
      {% with image.current_revision.imagerevision as revision %}
      {% thumbnail revision.image "50x50" crop="center" as thumb %}
        <p class="card-header">{% trans "Image id" %}: {{ image.id }}</p>
        <div class="card-body">
            <div class="d-flex flex-wrap">
            <div class="img-thumbnail">
              <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
            </div>
           <p class="ml-4">
              <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> Заменить </a>
              {% endif %}
            </p>
          </div>
        </div>
      {% endthumbnail %}
      {% endwith %}
    {% empty %}
    <tr>
      <td><em>Для этой статьи видео не найдено</em></td>
    </tr>
    {% endfor %}
  </div>
</div>

<p>
  <a href="{% url 'wiki:video_index' path=urlpath.path article_id=article.id %}">
    Управление видео &raquo;
  </a>
</p>
<hr />

<h4>Добавить новое видео</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-danger">
        {{ error_message }}
      </div>
    {% endfor %}
  {% endif %}

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

  <p>
  {% for field in form.visible_fields %}
    <fieldset id="div_{{ field.auto_id }}" class="control-group fields {% if field.errors %} error{% endif %}">
      
      <input type="file" id="{{ field.auto_id }}" name="{{ field.name }}" accept="video/mp4,video/x-m4v,video/*" >
      {% 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>

  <p>
    <button type="button" onClick="add_image(this.form)" name="{{ plugin.slug }}_save" value="1" class="btn btn-secondary btn-md">
      <span class="fa fa-upload"></span>
      Добавить видео
    </button>
  </p>
{% else %}

  {% if user.is_anonymous %}
    {% include "wiki/includes/anonymous_blocked.html" %}
  {% else %}
    <p><em>У вас нет разрешения на добавление видео</em></p>
  {% endif %}
{% endif %}

<hr />

<h4>
  Как добаить видео
</h4>

<p>После загрузки видео будет привязано к этой статье и может быть использовано только здесь. Другие пользователи могут заменить видео, но предыдущие версии будут сохранены. Чтобы показать видео, нажмите кнопку "Вставить" и выберите желаемые параметры. В заголовке можно использовать Markdown. Markdown-синтаксис для видео выглядит следующим образом:<br/>
<pre>[video:id width:320 height:240 controls:true]
         caption indented by 4 spaces</pre>
Возможные значения параметра controls:true<pre>true | false</pre>
Значение параметра width принимается в пикселях<pre>100 | 300 | 400 | и т.д.</pre>
Значение параметра height принимается в пикселях<pre>100 | 300 | 400 | и т.д.</pre>
</p>
{% endwith %}

<div class="modal" id="img_modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" style="position:relative !important;">
      <div class="modal-header">
        <h4 id="img_title"></h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group" style="margin-left:0; margin-right:0;">
            <label for="img_align">{% trans "Alignment" %}</label>
            <select class="form-control" id="img_align">
              <option>center</option>
              <option>left</option>
              <option>right</option>
            </select>
          </div>
          <div class="form-group" style="margin-left:0; margin-right:0;">
            <label for="img_size">{% trans "Size" %}</label>
            <select class="form-control" id="img_size">
              <option>default</option>
              <option>small</option>
              <option>medium</option>
              <option>large</option>
              <option>orig</option>
            </select>
          </div>
          <div class="form-group" style="margin-left:0; margin-right:0;">
            <label for="img_caption">{% trans "Caption" %}</label>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success btn-secondary" data-dismiss="modal" onClick="insert_image(this.form)"> Вставить видео </button>
        <button class="btn btn-danger" data-dismiss="modal"> Отменить </button>
      </div>
    </div>
  </div>
</div>