{% extends "base.html" %}
{% block head %}
<meta name="keywords" content="
  {%- if GLOBAL_KEYWORDS -%}
    {{ GLOBAL_KEYWORDS|join(', ') }}
    {%- if article.tags -%}{{', '}}{%- endif -%}
  {%- endif -%}
  {{article.tags|join(', ') }}">

  {% if FUZZY_DATES %}
  {% assets filters="slimit", output="js/lw-timeago.min.js", "js/lw-timeago/lw-timeago.js" %}
  <script src="{{ SITEURL }}/{{ ASSET_URL }}" type="text/javascript"></script>
  {% endassets%}
  {% endif %}
{% endblock %}

{% block title %}{{ article.title|striptags|escape }} | {{ SITENAME }}{% endblock %}
{% block description %}{{ article.title|striptags|escape }} | {{ article.content|striptags|truncate(154-article.title|length)|escape }}{% endblock %}

{% block content %}
<article>
  <div class="article_title">
    <h1><a href="{{ SITEURL }}/{{ article.url }}" class="nohover">{{ article.title }}</a></h1>
  </div>
  <div class="article_text">
    {{ article.content }}
  </div>
  <div class="article_meta">
    <p>Posted <time data-timeago datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
    {% if article.author %}
     by {% if AUTHORS_URL %} <a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author }}</a>{% else %}{{ article.author}}{% endif %}
    {% endif %}
    </p>
    {% if article.modified %}
    <p>Last updated <time data-timeago datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time></p>
    {% endif %}
    <p>
    {% if CATEGORY_URL %}
    Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
    {% if TAG_URL and article.tags %}&ndash;&ndash;{% endif %}
    {% endif %}
    {% if TAG_URL and article.tags %}
    Tags:
      {% for tag in article.tags %}
      <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>{% if not loop.last %},{% endif %}
      {% endfor %}
    </p>
    {% endif %}
  </div>

  {% if DISQUS_SITENAME %}
  <div id="article_comments">
    <div id="disqus_thread">
      {% if DISQUS_COLLAPSED %}
      <a href="javascript:loadDisqus()"><i class="fa fa-comments fa-lg"></i>Click to load comments</a>
      {% endif %}
    </div>
  </div>

  <script type="text/javascript">
    var disqus_identifier = "{{ article.url }}";
    loadDisqus = function() {
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//{{ DISQUS_SITENAME }}.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    };
    {% if not DISQUS_COLLAPSED %}
    loadDisqus();
    {% endif %}
  </script>
  {% endif %}
</article>
{% endblock %}

{% block scripts %}
{{ super() }}
{% if FUZZY_DATES %}
<script type="text/javascript">window.addEventListener("load", lw_timeago);</script>
{% endif %}
{% endblock %}