{% extends "./layout.html" %}

{% block sectionClasses %}news{% endblock %}
{% block meta_title %}What's new? / Blog{% endblock %}
{% block meta_description %}What's new? / Blog / Change log{% endblock %}

{% block scripts %}

{#==========================================
Moment.js, for dates formatting
==========================================#}
<script src="/public/js/moment.min.js"></script>

<script>

    $(function() {
    	
        {% if currentPage == 1 %}
            {#==========================================
            Initialize the Table Of Content
            ==========================================#}
            app.toc(188);
        {% endif %}
        
        {#==========================================
        Create friendly dates
        ==========================================#}
        app.createFriendlyDates();
    });
    
    app.createFriendlyDates = function() {
    	$(".news_date").each(function(index, el) {
    		var $el = $(el);
    		var localDate = moment.utc($el.text(), "YYYY-MM-DD HH:mm").local();
    		$el.html(localDate.format("YYYY-MM-DD HH:mm") + " <span>(" + localDate.fromNow() + ")</span>");
    	});
    }

</script>


{% endblock %}

{% block body %}

<div class="container">

    {% if currentPage > 1 %}
        <ol class="breadcrumb">
            <li><img class="inlineIcon breadIcon" src="/public/images/icons/bread.png" /> <a href="/news">News</a></li>
            <li class="active">page {{currentPage}} of {{nbrPageTotal}}</li>
        </ol>
    {% endif %}
    
    {% if currentPage > 1 %}
        <div id="sectionTitle" class="row"> 
            <div class="col-xs-12">
                <a href="#top"><h2 class="shortTop">News</h2></a>
            </div>
        </div>
    {% else %}
        <div id="sectionTitle" class="row"> 
            <div class="col-xs-12">
                <a href="#top"><h2 class="shortTop">What's new?</h2></a>
            </div>
        </div>
        <div id="sectionTitleFixed" class="row"> 
            <div class="col-xs-12">
                <a href="#top"><h2 class="shortTop"><img src="/public/images/logo_xsmall.png" /> What's new?</h2></a>
            </div>
        </div>
    {% endif %}

    <div class="row">
    
        {% if currentPage == 1 %}
            <nav id="toc" class="col-md-3">
                <ul class="nav nav-stacked">
                    <li class="openable">
                        <a href="#top">News</a>
                    </li>
                    <li class="openable">
                        <a href="#change_log">Change log</a>
                    </li>
                    <li class="openable">
                        <a href="#twitter">Twitter</a>
                    </li>      
                </ul>
            </nav>
        {% endif %}  
        
        {% if currentPage == 1 %}
            <div id="toc-content" class="col-md-9">
        {% else %}
            <div id="toc-content" class="col-md-12">
        {% endif %}
        
            <section id="news">
                
                {% if currentPage == 1 %}
                    <h2 class="noTop">
                        <a class="anchor" href="#news" title="permanent link"></a>
                        News 
                    </h2>
                    <div class="feed">
                        <a href="/rss" class="hint--bottom-left hint--bounce" data-hint="Spincast news feed"><img src="/public/images/rss.png" /></a> 
                        <span class="clear"></span>
                    </div> 
                {% endif %}

                {#==========================================
                Loop over the news entries and display them
                ==========================================#}
                {% for newsEntry in newsEntries %}
                    <div>
                        <h3 class="news_headline">
                            <a class="anchor" href="/news/{{newsEntry.id}}" title="permanent link"></a>
                            <a href="/news/{{newsEntry.id}}">{{newsEntry.title | raw }}</a>
                        </h3>
                        <div class="news_date_div">
                            <img class="inlineIcon alignMin3" src="/public/images/icons/date.png" /> <div class="news_date">{{newsEntry.publishedDate}}</div>
                        </div>
    
                        <div class="news_text">
                            {{newsEntry.description | raw }}
                        </div>
                    </div>
                {% else %}
                    <p>No news.</p>
                {% endfor %}
                
                {% if currentPage > 1 %}
                
                    {% if currentPage == 2 %}
                        <div class="newerNews btn btn-default"><a href="/news">back</a></div> 
                    {% else %}
                        <div class="newerNews btn btn-default"><a href="/news?page={{currentPage - 1}}">back</a></div> 
                    {% endif %}  
                {% endif %}  
                
                {% if nextPage > 0 %}
                    <div class="olderNews btn btn-default"><a href="/news?page={{nextPage}}">More news...</a></div>  
                {% endif %}  
                
            </section>
            
            {#==========================================
            We only display the Change Log and Twitter
            section on the first page
            ==========================================#}
            {% if currentPage == 1 %}
              
                <section id="change_log">
                    <h2 class="noTop">
                        <a class="anchor" href="#change_log" title="permanent link"></a>
                        Change log
                    </h2>
                    
                    <p>
                        Have a look at the <a href="https://github.com/spincast/spincast-framework/commits/master">Github commits</a> page.
                    </p>
                </section>
                
                <section id="twitter">
                
                    <h2 class="shortTop">
                        <a class="anchor" href="#twitter" title="permanent link"></a>
                        Twitter
                    </h2>
                    <p>
                        You can follow us on <a href="https://twitter.com/spincast" class="twitter">Twitter</a>.
                    </p>
                </section>
               
            {% endif %}  

        </div>
    </div>
    
</div> 

{% endblock %}