{% extends "base.html" %}

{% set has_right = True %}

{% block title %}
  {{ article.title|striptags }}
{% endblock %}


{% block top_center %}
  <h1>
    <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags|e }}">{{ article.title }}</a>
  </h1>
{% endblock %}


{% block right_sidebar %}
  <div class="well">

    <p><abbr title="{{ article.date.isoformat() }}"><i class="fa fa-calendar"></i> {{ article.locale_date }}</abbr></p>

    {% if AUTHOR_SAVE_AS and article.authors %}
      <p><address>
        <i class="fa fa-user"></i> By
        {% for author in article.authors %}
          <a href="{{ SITEURL }}/{{ author.url }}" rel="author">{{ author.name }}</a>
        {% endfor %}
      </address></p>
    {% endif %}

    <hr/>

    {% if article.category or article.tags %}
      <p>
        {% if article.category %}
          {% for category, articles in categories %}
            {% if category.url == article.category.url %}
              {% set article_counter = articles|length() %}
              <a href="{{ SITEURL }}/{{ article.category.url }}" rel="tag"
                  data-toggle="tooltip" class="label label-info"
                  title="{{ article_counter }} article{{ 's' if article_counter > 1 else '' }} in this category">{{ article.category }}</a>
            {% endif %}
          {% endfor %}
        {% endif %}
        {% if article.tags %}
          {% set article_tags = [] %}
          {% for tag, articles in tags %}
            {% for t in article.tags %}
              {% if tag.url == t.url %}
                {% if article_tags.append({'name': tag.name, 'url': tag.url, 'articles': articles|length()}) %}{% endif %}
              {% endif %}
            {% endfor %}
          {% endfor %}
          {% for tag in article_tags|sort(reverse = True, attribute = 'articles') %}
            {{ m.render_tag(tag) }}
          {% endfor %}
        {% endif %}
      </p>
      <hr/>
    {% endif %}

    {% if ARTICLE_EDIT_LINK %}
      <p>Found a typo ? Want to fix it ?</p>
      <a class="btn btn-info btn-block" href="{{ ARTICLE_EDIT_LINK % {'slug': article.slug} }}"><i class="fa fa-random fa-white fa-fw"></i> Edit article on GitHub</a>
      <hr/>
    {% endif %}

    {% if article.prev_article or article.next_article %}
      <nav>
        <ul class="pager">
          <li class="previous {% if not article.prev_article %} disabled {% endif %}">
            <a {% if article.prev_article %} href="{{ SITEURL }}/{{ article.prev_article.url }}" title="{{ article.prev_article.title|striptags|e }}" {% endif %} rel="prev">
              <span aria-hidden="true">←</span> Older
            </a>
          </li>
          <li class="next {% if not article.next_article %} disabled {% endif %}">
            <a {% if article.next_article %} href="{{ SITEURL }}/{{ article.next_article.url }}" title="{{ article.next_article.title|striptags|e }}" {% endif %} rel="next">
              Newer <span aria-hidden="true">→</span>
            </a>
          </li>
        </ul>
      </nav>
    {% endif %}

  </div>
{% endblock %}


{% block content %}
  {% import 'translations.html' as translations with context %}
  {{ translations.translations_for(article) }}

  <div>
    {{ article.content }}
  </div>

  {% if article.related_posts %}
    <h3>Related content</h3>
    <!-- TODO: Use fancier related layout, as in https://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/ -->
    <ul>
      {% for related_post in article.related_posts %}
        <li><a href="{{ SITEURL }}/{{ related_post.url }}">{{ related_post.title }}</a></li>
      {% endfor %}
      </ul>
  {% endif %}

  {% if SITEURL and DISQUS_SITENAME %}
    <div class="comments">
      <div id="disqus_thread"></div>
      <script type="text/javascript">
        var disqus_shortname = '{{ DISQUS_SITENAME }}';
        var disqus_identifier = "{{ article.url }}";
        var disqus_title = "{{ article.title|striptags|e }}";
        var disqus_url = "{{ SITEURL }}/{{ article.url }}";
        (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus</a>.</noscript>
    </div>
  {% endif %}

{% endblock %}
