{% 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 content %}   
<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>
             <a href="{% url 'fearfront:spotlight' %}">Spotlight</a>
           </li>
           <li>
             <a href="{% url 'fearfront:artists' %}">Artists</a>
           </li>
           <li class="active">
            <a href="{% url 'fearfront:artworks' %}">Artworks</a>

          </li>
          <li>
            <a href="/jobs">Jobs</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="search" class="artwork-main-search-section">
    <div class="browes_search row">

    </div>
    <div class="col-md-12 browse_category_contant browse-sub-section-two" id="search-results">
     <div class="container">
      
      {% for artworks in latest_artworks %} 
      
      <div class="col-md-3 col-sm-3 featured-main-content-image">
        <div class="feature-image-section home-artworks-list" data-artwork-url="{% url 'artwork:artwork-item' artworks.id %}" data-toggle="modal">
         {% if artworks.artwork_cover_thumbnail %}
         <a href="javascript:void(0)">
          <img class="img-responsive lazy" src="
          {% if artworks.artwork_type.artwork_type == 'image' %}
          {% if not artworks.artwork_cover_thumbnail and artworks.gallery_images.all %}
          {% thumbnail artworks.gallery_images.all.0.gallery_image 250x249 crop=',0' upscale %}
          {% else %}
          {% thumbnail artworks.artwork_cover_thumbnail 250x249 crop=',0' upscale %}
          {% endif %}
          {% else %}
          {% thumbnail artworks.artwork_cover_thumbnail 250x249 crop=',0' upscale %}
          {% endif %}">
        </a>
        {% else %}
        <a href="javascript:void(0)">
          <img class="img-responsive lazy" src="{% static 'images/not_available.png' %}">
        </a>
        {% endif %}
      </div>
      <div class="crousal-caption copntent-feature">
        <h4>{{artworks.artwork_name|truncatechars:15}}</h4>

        <div class="video_details blur_bg_image">      
          <div class="small_artwork_details_item">    
            {% if artworks.collaborators %}    
            <span>
              <img src="/static/images/icons/collaborator-icon.png" height="15">
              {{ artworks.collaborators.count }}
            </span>
            {% endif %}
            <span class="artwork_pub_date"> {{artworks.pub_date|date:'d.m.Y'}} </span>
          </div>
          <div class="clearfix"></div>
          <div class="small_artwork_details_item">
            <span>
              <img src="/static/images/icons/making-of.png" height="15">
              {% if artworks.making_of.all and artworks.making_of.all.0.makingof_images.count %}
              {{ artworks.making_of.all.0.makingof_images.count }}
              {% else %}
              0
              {% endif %}
            </span>       

            <span class="artwork_location">
              {% if artworks.location %}
              <i class="fa fa-map-marker"> {{artworks.location|truncatechars:20}} </i>
              {% endif %}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    {% endfor %}
  </div>
</div>
</div>
</div>
</div>

</div>
<div id="artwork_browse" class="video_wrapper">
  <div id="artwork_popup_modal" class="modal fade article_artwork_modal" data-backdrop="static" data-keyboard="false" style="display: none; padding: 5px; overflow: auto;">   
  </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 %}