{% 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 class="active">
             <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 id="category" class="browse_category_tab_two">
    <div class="container">
      <div class="row">
        <div class="browse_category browse-sub-two">
          {% include "partials/browse/_browse_expertises_categorylist.html" %}

          <div id="filter-by-category" class="col-md-9 browse_category_contant browse-cat social-main-catigo">   
            {% include "partials/_spinner.html" %}
            {% if user_exprtise_for_category %}
            {% for artist in user_exprtise_for_category %}
            <div class="col-md-4 col-sm-4 featured-main-content-image ">
              <div class="feature-image-section">
                <a href="{% url 'profile:my_profile' artist.owner.id %}">
                 <img class="img-responsive lazy" src="
                 {% if not artist.owner.socialaccount_set.all.0.get_avatar_url %}
                 {% if artist.owner.profile_thumbnail %}
                 {{ artist.owner.profile_thumbnail.url }}
                 {% else %}
                 {% static 'images/person.jpg' %}
                 {% endif %}
                 {% else %}
                 {{ artist.owner.socialaccount_set.all.0.get_avatar_url }}
                 {% endif %}">
               </a>
             </div>
             <div class="crousal-caption copntent-feature">
              <h4>{{ artist.owner.get_full_name|truncatechars:15 }}</h4>

              <div class="sub-section-socio">
                <ul>
                  <li>
                    {% if artist.owner.get_user_expertises_comma %}
                    <a href="#"> <img class="" src="{% static 'images/skill.png' %}"></a>
                    {{artist.owner.get_user_expertises_comma}}
                    {% endif %}
                  </li>
                  <li>
                    {% if artist.owner.city %}
                    <a href="#"> <img class="" src="{% static 'images/location-grey.png' %}"></a>
                    {{ artist.owner.city }}
                    {% endif %}
                  </li>
                  <li>
                    <a href="#"> <img class="" src="{% static 'images/collaborators-grey.png' %}"></a>
                    {% get_number_of_collaborators artist.owner.id as number_of_collborators %}
                    {{ number_of_collborators }}
                  </li>
                </ul>
                <ul>
                  <li class="play-list">
                    <a href="#"><img class="" src="{% static 'images/artwork_sample.png' %}"></a>
                    {% comment %}
                    {{ artist.owner.get_artwork_counts }}         
                    {% endcomment %}
                    {% get_number_of_artworks artist.owner.id as number_of_artworks %}
                    {{ number_of_artworks }}                       
                  </li>
                </ul>
              </div>
            </div>

            {% if artist.owner.getArtworks %}
            <div class="hover-image content-hover">
              <ul>
                {% for artist_image in artist.owner.getArtworks %}
                <li class="home-artworks-list" data-artwork-url=
                "{% url 'artwork:artwork-item' artist_image.id %}">
                <img class="img-responsive lazy" src="
                {% if artist_image.artwork_type.artwork_type == 'image' %}
                {% if not artist_image.artwork_cover_thumbnail and artist_image.gallery_images.all %}
                {% thumbnail artist_image.gallery_images.all.0.gallery_image 100x100 crop=',0' upscale %}
                {% else %}
                {% thumbnail artist_image.artwork_cover_thumbnail 100x100 crop=',0' upscale %}
                {% endif %}
                {% else %}
                {% thumbnail artist_image.artwork_cover_thumbnail 100x100 crop=',0' upscale %}
                {% endif %}">
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>
        {% if forloop.counter|divisibleby:3 %}
        {% endif %}
        {% endfor %}
        {% else %}
        <dir class="no_result_found">
          No result found
        </dir>
        {% endif %}

      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</div>

<div id="artwork_browse" class="">
  <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 %}