{% 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 span12">
    <h1><a href="/{{ article.url }}"> {{ article.title }} {%if article.subtext %} <small> {{ article.subtext }} </small> {% endif %} </a></h1>
    </header>
</div>

<div class="row-fluid">
    <div class="span8 offset1 article-content">
        {{ article.content }}
    </div>
    <div class="span2 offset1">
        <h4>Published</h4>
        {% if article.date %} 
        {% 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') }}    
        {% endif %}
        {% if article.modified %} 
        <h4>Last Updated</h4>
        {{ article.modified }}
        {% endif %}
        {% if article.category %}
        <h4>Category</h4>
        <a class="category-link" href="/categories.html#{{ category|replace(' ', '-')|e }}-ref">{{ article.category }}</a> 
        {% endif %}
        {% if article.tags %}
        <h4>Tags</h4>
        <ul class="list-of-tags tags-in-article"> 
            {% 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>
<script type="text/javascript" language="JavaScript">
    moveTOC(); 
</script>
{% endblock content %}