{% extends "base.html" %}

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

{% block content %}        
    <article class="post">
    <h1 class="page_title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
        {%include 'meta.html'%}
         {% import 'translations.html' as translations with context %}
         {{ translations.translations_for(article) }}

    
          <section class="post_content">
          {{ article.content }}
          </section>
    
    </article>

    {% if article.related_posts and article.related_posts %}
    <div class="clear" />

    <h2>&Agrave; lire aussi&nbsp;:</h2>

    <ul>
      {% for related_post in article.related_posts %}
      <li><a href="{{ SITEURL }}/{{ related_post.url }}">{{ related_post.title }}</a></li>
      {% endfor %}
    </ul>
    {% endif %}

    
    {% if DISQUS_SITENAME %}

    <div class="comments">
    <h2>Commentaires&nbsp;:</h2>
        <div id="disqus_thread">
        {% if article.disqus_comments %}
        <ul class="post-list">
            {% for comment in article.disqus_comments recursive %}
            <li class="post">
                <div class="post-content">
                    <div class="avatar hovercard">
                        <img alt="Avatar" src="{{ comment.author.avatar.small.cache }}">
                    </div>
                    <div class="post-body">
                        <header>
                            <span class="publisher-anchor-color">{{ comment.author.name }}</span>
                            <span class="time-ago" title="{{ comment.createdAt }}">{{ comment.createdAt }}</span>
                        </header>
                        <div class="post-message-container">
                            <div class="post-message publisher-anchor-color ">
                                {{ comment.message }}
                            </div>
                        </div>
                    </div>
                </div>
                {% if comment.children %}
                <ul class="children">
                    {{ loop(comment.children) }}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% else %}
          Aucun commentaire pour l'instant.
        {% endif %}
        </div>
    </div>
    <div id="disqus_comments">
        <button onclick="load_disqus()">recharger</button>
    </div>
    <script type="text/javascript">
        var disqus_identifier = "{{ article.url }}";
        function load_disqus() {
            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);
            var load_button = document.getElementById('disqus_comments');
            load_button.parentNode.removeChild(load_button);
      };
    </script>
    {% endif %}

{% endblock %}