{% extends "base.html" %}

{% block content_title %}{% endblock %}
{% block js %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        var cat = '';
        $('#lang-selector a').each(function(i, item){
            $(item).click(function(){
                $('#posts-list a[class="' + item.lang + '"]').each(function(i, article){
                    $(article).show();
                    var catDiv = $($(article).find('span[class*="category"]'))[0];
                    if (catDiv != undefined){
                        console.log(catDiv.innerText);
                        console.log(cat);

                        if (catDiv.innerText == cat){
                            $(catDiv).hide();
                        }
                        cat = catDiv.innerText;
                    }
                });

                $('#posts-list a[class!="' + item.lang + '"]').each(function(i, article){
                    $(article).hide();
                });

                // set this link as activated and all the other ones as deactivated
                $(item).addClass('activated');

                $('#lang-selector a[lang!="' + item.lang + '"]').each(function(i, otherLink){
                    $(otherLink).removeClass('activated');
                });

                return false;
            });
        });
    });
</script>
{% endblock %}

{% block content %}        
{% if articles %}
    <section id="content" class="body">
    <div id="lang-selector">filter by language: <a href="#" lang='en'>english</a> <a href="#" lang='fr'>french</a></div>
    <ol id="posts-list" class="hfeed">
    {% set category = None %}
    {% for article in articles_page.object_list %}        
    <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="{{ article.title}}" class='{{ article.lang }}'>
            <li><article class="hentry {{ article.category }}">    
            {% if article.category.name != category %}
                <span class='category {{ article.category }}'>{{ article.category }}</span>
                {% set category = article.category.name %}
            {% endif %}
            <h1> {{ article.title }} </h1>
            </article></li>
        </a>
    {% endfor %}
    </ol><!-- /#posts-list -->
    </section><!-- /#content -->
{% else %}
<section id="content" class="body">    
<h2>Pages</h2>
    {% for page in PAGES %}
        <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
    {% endfor %}
</section>
{% endif %}
{% endblock content %}