{% 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 data-toggle="tab" href="#spotlight">Spotlight</a> -->
<a href="{% url 'fearfront:spotlight' %}">Spotlight</a>
</li>
<li>
<a href="{% url 'fearfront:artists' %}">Artists</a>
<!-- <a data-toggle="tab" href="#category">Artists</a> -->
</li>
<li>
<!-- <a data-toggle="tab" href="#search">Artworks</a> -->
<a href="{% url 'fearfront:artworks' %}">Artworks</a>
</li>
<li>
<!-- <a data-toggle="tab" href="#jobs">Jobs</a> -->
<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>
<!-- End Spotlight -->
<!-- Artists Section -->
<!-- End Artist Section -->
<!-- Artwork Section -->
{% comment %}
<div id="search" class="tab-pane fade 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>
{% endcomment %}
<!-- End of Artwork Section -->
<!-- Job section -->
<div id="jobs" class="tab-pane fade job-browser">
<!-- <div class="col-md-6 browse_category_contant job-broser-main" id="search-results">
<div class="paid-tabs-jobs job-browse-paid">
<ul class="nav nav-tabs nav-tabs-pills job-nav-bar" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Paid Jobs</a></li>
<li role="presentation" class="free-project"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Free Projects</a></li>
<li role="presentation" class="post-job-project post-job-desktop" id="post_job_web">
<a href="#profile" aria-controls="profile" role="tab" class="post-job hidden-xs visible-sm visible-md visible-lg">post a job / project</a>
</li>
<li role="presentation" class="post-job-project post-job-mobile" id="add_job_mobile">
<a href="#profile" aria-controls="profile" role="tab" class="post-job visible-xs hidden-sm hidden-md hidden-lg">add job </a>
</li>
</ul>
<div class="tab-content tab-content-area">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="content-area browse-three-sub">
<div class="menu-item text-right">
<ul>
<li><a href="#">all Skills</a></li>
<li class="skills-links"><a href="#">my Skills only</a></li>
</ul>
</div>
<div class="content-area-heading" style="padding-bottom: 5px;">
<div class="heading-para view-post-job" data-id="52" id="current52">
<h1>
Interview Make Up
</h1>
<p class="desktop-paid-para">Hair & Make Up / Berlin / 10.11.2018 / Free Project</p>
<div class="triangle-div" id="curr52" style="display: none;"></div>
</div>
<div class="heading-para view-post-job" data-id="52" id="current52">
<h1>
Nightlife Documentary
</h1>
<p class="desktop-paid-para">Hair & Make Up / Berlin / 09.11.2018 / Paid Job</p>
<div class="triangle-div" id="curr52" style="display: none;"></div>
</div>
<div class="heading-para view-post-job" data-id="52" id="current52">
<h1>
Student Fashion Show
</h1>
<p class="desktop-paid-para">Hair & Make Up / Berlin / 10.11.2018 / Free Project</p>
<div class="triangle-div" id="curr52" style="display: none;"></div>
</div>
<div class="heading-para view-post-job" data-id="52" id="current52">
<h1>
Music Video
</h1>
<p class="desktop-paid-para">Hair & Make Up / Berlin / 09.11.2018 / Paid Job</p>
<div class="triangle-div" id="curr52" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
<!-- Job section end here -->
</div>
</div>
</div>
<!-- End of Browse page -->
<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>
</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 %}