{% extends "base.html" %}

{% block title %}
{{ article.title }} - {{ super() }}
{% endblock title %}

{% block content %}
<script  language="javascript" type="text/javascript">
    function moveTOC() {
        var table_of_contents = document.getElementById('contents');
        var toc_sidebar = document.getElementById('toc_sidebar');
        if (table_of_contents && toc_sidebar)
            toc_sidebar.appendChild(table_of_contents);
    }
</script>
<div class="row-fluid">
    <header class="page_header span10 offset2">
    <h1> {{ article.title }} <small> {%if article.subtext %} {{ article.subtext }} {% endif %} </small></h1>
    </header>
</div>

<div class="row-fluid">
    <div class="span2" id="toc_sidebar">
    </div>
    <div class="span6 article-content">
        {{ article.content }}
    </div>
    <div class="span3 offset1">
        <div class="row-fluid">
            <div class="span12">
                <p>
                {% set day = article.date.strftime('%d')|int %}
                {% set suffix = ['st', 'nd', 'rd', 'th'] %}
                {{ article.date.strftime('%b') }} {{ day }}
                {%- if 4 <= day <= 20 or 24 <= day <= 30 -%} {{ suffix[3] }}
                {%- elif day % 10 - 1 == 0 -%} {{ suffix[0] }} 
                {%- elif day % 10 - 1 == 1 -%} {{ suffix[1] }} 
                {%- elif day % 10 - 1 == 2 -%} {{ suffix[2] }} 
                {%- endif -%}
                {{ article.date.strftime(', %Y') }}    
                </p>
                <p>
                Published by <a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author }}</a> in <a href="{{ SITEURL }}/categories.html#{{ category|replace(' ', '-')|e }}-ref">{{ article.category }}</a> 
                </p>
                {% if article.modified %} 
                <p>Updated on {{ article.modified }}
                </p>
                {% endif %}

            </div>
        </div>

        <div class="row-fluid">
            <div class="span12">
                {% if article.tags %}
                <h4>Tags</h4>
                <ul class="list-of-tags"> 
                    {% for tag in article.tags %}
                    <li><a href="/tags.html#{{ tag|replace(' ', '-')|e }}-ref">{{ tag }}
                        {% for aTag, tagged_articles in tags if aTag == tag %}
                        <span>{{ tagged_articles|count }}</span>
                        {% endfor %}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" language="JavaScript">
    moveTOC(); 
</script>
{% endblock content %}