Template source: partials/artwork/big/_big_artwork_item.html

{% load compress staticfiles i18n %}
{% load embed_video_tags %}
{% load thumbnail %}
{% load get_favorited_artwork %}
{% load collaborated_users_in_an_artwork %}
{% load check_artwork_has_making_of %}

<div class="clearfix"></div>
  <div class="col-md-12 nopadding artwork_common_item big_artwork_item">
      <div class="col-md-12 iframe_wrapper  text-right edit-artwork-wrapper small_screen_nopadding"> 
        {% get_number_of_collaborators_in_an_artwork artwork.id as collaborated_list %}
        {% check_artwork_has_makingof artwork.id as has_making_of %}       
        {% if request.user.is_authenticated %}
          {% if request.user.id in collaborated_list %}
            <a href="#" data-form="{% url 'artwork:artwork-update' artwork.owner.id artwork.id %}" class="btn btn-default custom_btn update_artwork edit_artwork blur_bg_image" type="button">
              Edit Artwork
              <i class="fa fa-pencil" style="margin-left: 10px;"> </i>
              <div style="float: right; display: none; margin-left: 10px;" class="mini-spinner"></div>
            </a>                    
          {% else %}
            {% if request.user.id not in collaborated_list %}                      
              <span class="btn btn-default custom_btn update_artwork edit_artwork blur_bg_image">
                Uploaded by
                <a class="artwork_owner_profile" href="{% url 'profile:my_profile' artwork.owner.id %}" type="button"> 
                {{ artwork.owner.get_full_name }}
                </a>
              </span> 
            {% endif %}                   
          {% endif %}
        {% endif %}

        {% if artwork.embed_content %}
          {% video artwork.embed_content as my_video %}
            <iframe class="global_iframe" src="{{ my_video.url }}" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>       
            </iframe>
          {% endvideo %}
        {% else %}
          <div id="gallery_wrapper_{{ artwork.id }}" class="col-md-12 nopadding gallery_wrapper simplegallery">
            <div class="col-md-8 gallery_wrapper_col_md_8 blur_bg_image">
              <div id="artwork_{{ artwork.id }}" data-current-artwork-id="{{ artwork.id }}" class="gallery_content">
                {% if artwork.gallery_images %}
                  {% for img in artwork.gallery_images.all %}
                    <div class="item" data-src="{{ img.gallery_image.url }}" data-sub-html="">
                      <img class="artwork_slide_down_contant_img image_{{artwork.id}}{{ forloop.counter }}" alt="{% if img.about_gallery_image %}{{ img.about_gallery_image }}{% endif %}" src="{{ img.gallery_image.url }}" style="{% if forloop.counter > 1 %} display: none;{% endif %}" data-gallery-src="{{ img.gallery_image.url }}">
                    </div>
                  {% endfor %}
                {% endif %}
              </div>
            </div>
            <div class="col-md-4 gallery_wrapper_col_md_4 nopadding blur_bg_image">
              <div id="artwork_{{ artwork.id }}" data-current-artwork-id="{{ artwork.id }}" class="masonry-container thumbnail">
                {% if artwork.gallery_images %}
                  {% for img in artwork.gallery_images.all %}        
                    <div class="col-md-4 item gallery_image thumb">
                      <a href="#" rel="{{artwork.id}}{{ forloop.counter }}">                  
                        <img id="thumb_{{artwork.id}}{{ forloop.counter }}" class="img-responsive artwork_slide_down_contant_img" alt="{{ img.about_gallery_image }}" src="{% thumbnail img.gallery_image 400x0 crop='smart' %}">
                      </a>
                      {% if img.about_gallery_image %}
                        <div class="gallery_description">
                          <p style="padding-top:5px;"> 
                            {{ img.about_gallery_image }}
                          </p>
                        </div>
                      {% endif %}
                    </div>  
                  {% endfor %}
                {% endif %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>

      <div class="col-md-12 small_screen_nopadding">
        <div class="col-md-12 video_details blur_bg_image">
          <div class="row">
            <div class="col-md-12 large_artwork_title_info_wrapper">
              <div class="col-md-8 artwork_title_wrapper">
                <h4 class="large_artwork_title">{{ artwork.artwork_name }}</h4>
              </div>
              <div class="col-md-4 large_artwork_info_wrapper">

                {% get_favorited_artwork_by_user artwork.id as has_artwork_favorited %}
                <div id="artwork_id_number_{{ artwork.id }}" class="large_artwork_share_favorite_wrapper">           
                  <a class="make_artwork_favorites" href="{% url 'artwork:make-artwork-favorites' artwork.pk %}">  
                    {% csrf_token %}    
                    {% if has_artwork_favorited %}
                      <img src="{% static 'images/icons/star.png' %}">
                    {% else %}
                      <img src="{% static 'images/icons/empty-star.png' %}">
                    {% endif %}           
                  </a>
                  <!-- Share artwork button with Jbox popup -->
                  <button type="button" class="btn btn-info btn-lg artwork_url_modal_btn" data-url="{% if request.is_secure %}https://{% else %}http://{% endif %}{{ request.get_host }}{% url 'artwork:artwork-details' artwork.slug %}">
                    <img src="{% static 'images/share.png' %}">
                  </button>                          
                </div>
                <div class="large_artwork_info_left">
                  <div class="artwork_buy_wrapper">
                    <!-- <a href="#" class="artwork_buy">Buy</a> -->
                    {% if artwork.pub_date %}
                      <span class="artwork_pub_date"> {{ artwork.pub_date|date:"d M Y" }} </span>
                    {% endif %}
                    {% if artwork.location %}
                      <span class="artwork_location"> <i class="fa fa-map-marker"></i> {{ artwork.location }} </span>
                    {% endif %}
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="col-md-12 large_artwork_tabs">
            <ul>
              <li class="large_artwork_tabs_collab">Credits</li>
              <li class="large_artwork_tabs_about">About</li>
              <li class="large_artwork_tabs_making_of">Making of</li>
            </ul>
          </div>
          <div class="col-md-4 col-sm-4 large_artwork_tabs_content large_artwork_collab_wrapper large_artwork_close">
            {% if artwork.collaborators %}
              <h5>Credits</h5>
              {% if request.user.id in collaborated_list %}
                <div class="ui-sortable collab-sorting">
              {% endif %}
                {% for collaborator in artwork.sorted_collaborations %}              
                  <div id="collab_{{ collaborator.pk }}" class="credits_collab_list">
                    <div class="credits_collab_list_inner_img">
                      <img height="50" width="50" src="
                              {% if collaborator.user.profile_thumbnail_tiny %}
                                {{ collaborator.user.profile_thumbnail_tiny.url }}
                              {% else %}
                                {% static 'images/artwork-user.png' %}
                              {% endif %}
                              ">
                    </div>
                    <div class="credits_collab_list_inner">
                      {% if collaborator.user %} 
                      <a href="{% url 'profile:my_profile' collaborator.user.id %}">
                        {% if collaborator.collaborator_name %}
                          {{ collaborator.collaborator_name }}
                        {% else %}
                          {{ collaborator.user.get_full_name }}
                        {% endif %}
                      </a> 
                      {% else %}
                        <span>
                          {{ collaborator.collaborator_name }}
                        </span>
                      {% endif %}
                      {% if collaborator.assignment %} 
                          <span>{{ collaborator.assignment }}</span>
                      {% endif %}
                    </div>
                    {% if request.user.id in collaborated_list %}
                      <!-- <img class="collab_sort_icon" title="Sort Collaborator" src="{% static 'images/icons/sort-icon.png' %}"> -->
                    {% endif %}
                    <div class="clerafix"></div>
                  </div>              
                {% endfor %}
              {% if request.user.id in collaborated_list %}
                </div>
              {% endif %}
            {% endif %}
          </div>
          <div class="col-md-4 col-sm-4 large_artwork_tabs_content large_artwork_about_wrapper about-wrapper large_artwork_close">
            {% if artwork.about_artwork %}
              <h5>About</h5>
              {% autoescape off %}
                {{ artwork.about_artwork }}
                {% comment %}
                  <p class="artwork_about_full" style="display: none;">{{ artwork.about_artwork }}</p>
                  <p class="artwork_about">{{ artwork.about_artwork|truncatechars:300 }}</p>
                  {% if artwork.about_artwork|length > 300 %}
                    <span class="artwork_about_slide_down">
                      <a href="#">Read more</a>
                    </span>
                  {% endif %}
                {% endcomment %}
              {% endautoescape %} 
            {% endif %}
            
            {% if artwork.buy_link %}
              <div class="artwork_related_links">
                <p>Buy</p>
                <a href="{{ artwork.buy_link }}" target="_blank">{{ artwork.buy_link }}</a>
              </div>
            {% endif %}
          </div>          
          <div class="col-md-4 col-sm-4 large_artwork_tabs_content larg_artwork_making_of_wrapper large_artwork_close">
            <div class="artwork_making_of_content {% if has_making_of %}has_artwork_making_of_content{% endif %}" data-making-of-url="{% if has_making_of %}{% url 'profile:get-artwork-making-of' artwork.id %}
            {% endif %}">
              {% include "partials/_spinner.html" %}
              
              <!-- Dynamicallly ajax loaded content goes here ..-->
            </div> 
          </div>
          <div class="clearfix"></div>
          
          <div class="artwork_bottom_contant ">
            {% comment %}
              <div class="col-md-12 nopadding">
                <div class="col-md-6">
                  <span style="padding-bottom: 15px;"> 
                     {% if artwork.making_of.all and artwork.making_of.all.0.makingof_images.count %}
                      Making of: {{ artwork.making_of.all.0.makingof_images.count }} photo{{ artwork.making_of.all.0.makingof_images.count|pluralize }} 
                      {% else %}
                      No Making of
                     {% endif %}
                  </span>
                </div>
              </div>
            {% endcomment %}
            <br>
            {% if artwork.making_of.all %}
              {%  if artwork.making_of.all.0.makingof_images.count or artwork.making_of.all.0.embed_making_of_video %}
                <hr style="border-color: #979797;">
              {% endif %}
            {% endif %}
            {% with artwork.making_of.all.0 as making_of %}
              {% if making_of.makingof_images.all or making_of.embed_making_of_video or artwork.collaborators.all|length > 3 or artwork.about_artwork|length > 400 %}
                <div class="artwork_slide_down_button">
                  <div align="center">
                    <span class="artwork_slide_down_bottom large_artwork_slide_down_top">• • •</span>
                    {% include "partials/_spinner.html" %}
                  </div>                    
                </div>
              {% endif %}
            {% endwith %}
          </div>
        </div>
      </div>
  </div>