{% extends "blog_base.html" %}
<!-- BLOG -->
{%block content_area %}
  <!-- blog item -->
  
    {% for article in articles[:POST_LIMIT] %}
      <div class="item">
        <div class="item-title">
          {% if article.link %}
            <h2><a href="{{ article.link }}">{{article.title}} <i class="fa fa-external-link" target="_blank"></i></a></h2>
          {%else%}
            <h2><a href="{{ SITEURL }}/{{ article.url }}">{{article.title}}</a></h2>
          {%endif%}
          <a href="{{article.category.url}}" class="label label-default light"><i class="fa fa-dot-circle-o"></i> {{article.category}}</a> 
          <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" class="label label-default light"><i class="fa fa-comment-o"></i> ?? Comments</a>
          <span class="label label-default light">{{article.locale_date}}</span>
        </div>
        <!-- image -->
        {% if article.featured %}
          {% if article.type|lower =='image' %}
            <figure>
              <img src="{{article.featured}}" class="img-responsive" data-src="holder.js/820x500/#676767:#555555/auto/" alt="img" />
            </figure>
          {% elif article.type|lower =='video' %}
            <iframe class="fitvids" src="{{article.featured}}" width="800" height="450"></iframe>
          {% elif article.type|lower =='audio'%}
            <iframe class="fullwidth" height="166" src="{{article.featured}}"></iframe> 
          {% endif %}
        {% endif %}

        <!-- blog short preview -->
        <p>
          {% if article.summary %}
            {{ article.summary }}
          {% else %}
            {{ article.content[:196] }} + ' ...'
          {% endif %}
        </p>

        <!-- read more button -->
        <a href="{{ SITEURL }}/{{ article.url }}" class="btn btn-xs"><i class="fa fa-sign-out"></i> READ MORE</a>
      </div>
    {% endfor %} 
  <!-- /blog item -->

  <!-- PAGINATION -->
  {#% include 'pagination.html' %#}
  <!-- /PAGINATION -->
{%endblock%}