{% 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 you wiki link. Tags for links look like this:" %}<br />
</p>

<pre>[Title of link](wiki:ArticleSlug)</pre>

<div class="input-group">
  <input type="text" class="page_title_query form-control" id="links_page_title_query" value="" placeholder="Type to search..." />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" onclick="wikiInsertLink()">
      {% trans "Insert" %}
    </button>
  </span>
</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/js/typeahead.min.js" %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
  $(document).ready(function() {
      $('.page_title_query').typeahead({
        remote: "{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}?query=%QUERY",
        dataType: String
      });
  });

function wikiInsertLink() {
  $('#id_content').insertAtCaret($('#links_page_title_query').val());
}

</script>
{% endaddtoblock %}