{% extends "base.html" %}
{% block head %}
<meta name="keywords" content="
  {%- if GLOBAL_KEYWORDS -%}
    {{ GLOBAL_KEYWORDS|join(', ') }}
    {%- if article.tags -%}{{', '}}{%- endif -%}
  {%- endif -%}
  {{article.tags|join(', ') }}">
{% 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>
  {% if DISPLAY_SUBTITLE %}
    <h4>{{ article.subtitle }}</a></h4>
  {% endif %}
  </div>
  <div class="article_text">
    {{ article.content }}
  </div>
  {% if article.photo_gallery %}
  <div class="gallery">
  {% for title, gallery in article.photo_gallery %}
    <h1>{{ title }}</h1>
    {% for name, photo, thumb, exif, caption in gallery %}
      <a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
    {% endfor %}
  {% endfor %}
  </div>
  {% endif %}
  {% if article.video_gallery %}
  <div class="gallery">
  {% for title, gallery in article.video_gallery %}
    <h1>{{ title }}</h1>
    {% for video, width, height, format in gallery %}
    <video width="{{ width }}" height="{{ height }}" controls>
      <source src="{{ SITEURL }}/{{ video }}" type="video/{{ format }}">
	  Your browser does not support the video tag.
    </video>
    {% endfor %}
  {% endfor %}
  </div>
  {% endif %}
  {% if not DISPLAY_META_ABOVE_ARTICLE %}
    {% include "modules/article_meta.html" %}
  {% endif %}

  {% 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 <span class="disqus-comment-count" data-disqus-identifier="{{ article.url }}">comments</span></a>
      {% endif %}
    </div>
  </div>

  <script id="dsq-count-scr" src="https://{{ DISQUS_SITENAME }}.disqus.com/count.js" async></script>
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.identifier = "{{ article.url }}";
        this.page.title = "{{ article.title }}";
    };
    loadDisqus = function(sitename) {
      var d = document, s = d.createElement('script');
      s.src = 'https://{{ DISQUS_SITENAME }}.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    };
    {% 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 %}