{% extends 'base.html' %}

{% block title %}
{{ article.title|striptags|e }} {%if article.subtitle %} - {{ article.subtitle|striptags|e }} {% endif %} · {{ super() }}
{% endblock title %}

{% block head_description %}
{% if article.summary %}
{{ article.summary|striptags|e }}
{% endif %}
{% endblock head_description %}

{% block meta_tags_in_head %}
{{ super() }}
{% if article.tags or article.category or article.keywords %}
<meta name="keywords" content="{{ [article.tags|join(', '), article.category, article.keywords]|join(', ') }}" />
{% endif %}

{% from '_includes/smo_metadata.html' import smo_metadata with context %}
{{ smo_metadata(article) }}
{% endblock meta_tags_in_head %}

{% block style %}
{% if DRAFT %}
<style>
.article-content p {
  padding-left: 50px;
  position: relative;
}

.article-content p:before {
  display: block;
  position: absolute;
  left: 5px;
}
</style>
{% endif %}
{% endblock %}

{% block content %}
<article>
<div class="row-fluid">
    <header class="page-header span10 offset2">
    <h1><a href="{{ SITEURL }}/{{ article.url }}"> {{ article.title }} {%if article.subtitle %} <small> {{ article.subtitle }} </small> {% endif %} </a></h1>
    </header>
</div>

<div class="row-fluid">
    {% if article.toc %}
    <div class="span2 table-of-content">
        <nav>
        <h4>Contents</h4>
        {{ article.toc }}
        </nav>
    </div>
    <div class="span8 article-content">
    {% else %}
        <div class="span8 offset2 article-content">
    {% endif %}

            {% import '_includes/translations.html' as translations with context %}
            {{ translations.translations_for(article) }}
            {{ article.content }}
            {% from '_includes/share_links.html' import share_links with context %}
            {{ share_links(article) }}
            {% from '_includes/comments.html' import comments with context %}
            {{ comments(article) }}
            <hr/>
            {% include '_includes/related_posts.html' with context %}
            {% if article.prev_article or article.next_article %}
            <aside>
            <nav>
            <ul class="articles-timeline">
                {% if article.prev_article %}
                    {% set ptitle = article.prev_article.title|striptags|e %}
                    {% set pv_title = article.prev_article.title|striptags %}
                    {%if article.prev_article.subtitle %}
                        {% set pv_title = pv_title + ' ' +  '<small>' + article.prev_article.subtitle|striptags + '</small>' %}
                        {% set ptitle = ptitle + ' - ' + article.prev_article.subtitle|e %}
                    {% endif %}
                <li class="previous-article">« <a href="{{ SITEURL }}/{{ article.prev_article.url }}" title="Previous: {{ ptitle }}">{{ pv_title }}</a></li>
                {% endif %}
                {% if article.next_article %}
                    {% set ntitle = article.next_article.title|striptags|e %}
                    {% set nv_title = article.next_article.title|striptags %}
                    {%if article.next_article.subtitle %}
                        {% set nv_title = nv_title + ' ' +  '<small>' + article.next_article.subtitle|striptags + '</small>' %}
                        {% set ntitle = ntitle + ' - ' + article.next_article.subtitle|e %}
                    {% endif %}
                <li class="next-article"><a href="{{ SITEURL }}/{{ article.next_article.url }}" title="Next: {{ ntitle }}">{{ nv_title }}</a> »</li>
                {% endif %}
            </ul>
            </nav>
            </aside>
            {% endif %}
        </div>
        <style id="numbers"></style>
        <section>
        <div class="span2" style="float:right;font-size:0.9em;">
            {% include '_includes/last_updated.html' %}
            {% include '_includes/multi_parts.html' %}
        </div>
        </section>
</div>
</article>
{% endblock content %}

{% block script %}
    {{ super() }}
    {% from '_includes/comments.html' import comments_script with context %}
    {{ comments_script(article) }}

{% if DRAFT %}
<script>
$(document).ready(function() {
  var maxNum = 0;  //how many lines should be prepared (Takin in considersation, there would be more wrappers) 
  $(".article-content").each(function() {//create counter for each .NumeredTextBlock wrapper
    var line = 1;  //start with number 1
    $("p", this).each(function() {//look for paragraph elements inside wrapper
      $(this).addClass("line" + line);//add class with line number
      line++;
      if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
    });
  });
  var prepStyle = "";//prepare css style with line numbering
  while (maxNum--) {//prepare as many styles as the max number in document
    prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
  }
  $("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
  console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});
</script>
{% endif %}

{% endblock script %}