{% extends "base.html" %}
{% load compress staticfiles i18n %}
{% load number_of_collabs_and_artworks %}
{% load embed_video_tags %}
{% get_current_language as LANGUAGE_CODE %}
{% load thumbnail %}
{% block page_title %}Browse {% endblock %}
{% block content %}
<!-- Start Browse page -->
<div class="browse_wrapper browser-main-wrapper-section">
 <div class="row browse browser-main-section">
  <div class="main-background-browse-section">
    <div class="main-navigation-tab-section">
      <div class="container">
        <div class="row">
          <ul class="nav nav-tabs nav-discover-section">
            <li class="active">
              <a href="{% url 'fearfront:spotlight' %}">Spotlight</a>
            </li>
            <li>
             <a href="{% url 'fearfront:artists' %}">Artists</a>
           </li>
           <li>
             <a href="{% url 'fearfront:artworks' %}">Artworks</a>
           </li>
           <li>
            <a href="/jobs">Jobs</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="tab-content">
  <!-- Start Spotlight -->
  <div id="spotlight" class="tab-pane fade in active browse-one">
    <div class="container">
      <div class="row">
        {% for article in articles %}
        <div class="col-md-4 col-sm-4 featured-main-content-image">
          <div class="feature-image-section">
            <a href="{% url 'articles:article-details' article.slug %}">
              <img class="img-responsive lazy" src="{% thumbnail article.cover_photo 650x364 crop=',0' upscale %}">
            </a>
          </div>
          <div class="crousal-caption copntent-feature">
            <h4>{{article.title}}</h4>
            <p>
              {% if article.subheadline %}
              {% autoescape off %}
              {{ article.subheadline|truncatechars_html:120 }}
              {% endautoescape %}
              {% endif %}
            </p>
          </div>
        </div>
        {% if forloop.counter|divisibleby:3 %}
        {% endif %}
        {% endfor %}

      </div>
    </div>
  </div>
</div>
</div>
</div>
{% endblock %}

{% block extra_js %}
{% compress js %}
<script src="{% static 'js/imagesloaded.js' %}"></script>
<script src="{% static 'js/masonry.min.js' %}"></script>
<script src="{% static 'js/simple-gallery.js' %}"></script>     
<script src="{% static 'js/artwork.js' %}"></script>    
{% endcompress %}

{% endblock %}