{% load i18n sekizai_tags static %}

<h4>{% trans "Link to another wiki page" %}</h4>

<p>
  {% trans "Type in something from another wiki page's title and auto-complete will help you create a tag for your wiki link. Tags for links look like this:" %}<br />
</p>

<pre>[Title of link](wiki:ArticleSlug)</pre>
<div class="input-group">
  <select id="links_page_title_query"></select>

  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="link_insert_button">Insert</button>
  </div>
</div>

<hr />

<h4>{% trans "An external link" %}</h4>

<p>
  {% trans "You can link to another website simply by inserting an address example.com or http://example.com or by using the markdown syntax:" %}<br />
</p>
<pre>[Clickable text](http://example.com)</pre>

{% addtoblock "js" %}<script type="text/javascript" src="{% static "wiki/select2/js/select2.min.js" %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script
type = "text/javascript" >
  $(document).ready(function () {
    $('#links_page_title_query').select2({
      dropdownAutoWidth: true,
      placeholder: "Type to search...",
      ajax: {
        url: function (params) {
          return "{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}?query=" + params.term
        },
        processResults: function (data) {
          let ret = [];
          data.forEach(function (val) {
            ret.push({"id": val, "text": val})
          });
          return {results: ret};
        },
      },
    });

    $("#link_insert_button").on("click", function () {
      $('#id_content').insertAtCaret($('#links_page_title_query').val());
    });
  });

</script>
{% endaddtoblock %}
{% addtoblock "css" %}
<link rel="stylesheet" href="{% static "wiki/select2/css/select2.min.css" %}" type="text/css" />
{% endaddtoblock %}
