{% extends "layout.html" %}
{% block css_this_page %}page.css{% endblock %}
{% block title %}
  {% if page.first%}
    {{blog.name}}
  {% else %}
    Page {{page.number}} | {{blog.name}}
  {%endif%}
{% endblock %}

{% block content %}
{% for post in page.posts %}
<div class="item {% if post.title_pic %} item-p {% else %} item-no-p {% endif %}">
  <div class="post{% if post.title_pic %} post-with-title-pic {% else %} post-without-title-pic {% endif %}">
    <div class="meta">
      <h1 class="title">
        <a class="title" href="{{root_path}}/post/{{post.name}}.html" title="{{post.title}}" >{{post.title}}</a>
      </h1>
      <span class="date">
        <i class="icon-clock"></i>
        <a class="datetime" title="{{post.datetime.strftime("%Y-%m-%d %H:%M")}}">{{post.datetime.strftime("%b  %d, %y")}}</a>
      </span>
      {% if post.tags %}
      <span class="tags">
        <i class="icon-tag"></i>
        {% set tag_counter = 0 %}
        {% for tag in post.tags %}
        {% set tag_counter = tag_counter + 1%}
        <a href="{{root_path}}/tag/{{tag}}.html" class="tag" title="{{tag}}">{{tag}}</a>
        {% if tag_counter < post.tags|length %}
        ,&nbsp;
        {% endif %}
        {% endfor %}
      </span>
      {% endif %}
    </div>
    {% if post.title_pic %}
    <a href="{{root_path}}/post/{{post.name}}.html" title="{{post.title}}" class="entry-link"></a>
    <div class="title-pic-preview" data-background="{{post.title_pic}}" ></div>
    <div class="spinner" style="background-image:url({{root_path}}/{{blog.theme}}/static/images/spinner-circle-fade.gif)"></div>
    {% else %}
    <div class="post-html summary">{{post.summary}}</div>
    <p class="read-more"><a href="{{root_path}}/post/{{post.name}}.html" title="Read more"> ··· </a><p>
    {% endif %}
  </div>
</div>
{% endfor %}
<div class="paging">
{% if page.first == False %}
<a class="prev" title="Previous Page" href="{% if page.number == 2 %}{{root_path}}/{% else %}{{root_path}}/page/{{page.number-1}}.html{%endif%}"> < </a>
{%endif%}
{% if page.last == False %}
<a class="next" title="Next Page" href="{{root_path}}/page/{{page.number+1}}.html"> > </a>
{%endif%}
</div>
{% endblock %}

{% block header_extra %}
<!-- lazyload background images-->
<script src="{{root_path}}/{{blog.theme}}/static/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="{{root_path}}/{{blog.theme}}/static/js/jquery.lazyload.background.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
      $("div.item div.title-pic-preview").lazyload({effect: 'fadeIn'});
  });
</script>
<!-- end lazyload -->
{% endblock %}