{% extends 'base.html' %}
{% load staticfiles %}
{% load compress %}

  {% block css %}
    <link rel="stylesheet" href="{% static 'css/ibacor-sosmed-button.css' %}" type="text/css" media="all"/>
    <link href="{% static 'css/font-awesome-4.1.0.min.css' %}" type="text/css" type="text/css" media="all">
    <link rel="stylesheet" href="{% static 'css/jquery.bxslider.min.css' %}" type="text/css" media="all"/>
    <link rel="stylesheet" href="{% static 'css/plugin_map.css' %}">

    <style type="text/css">
      .close_embed{margin-top:-15px;margin-right:-15px}.bx-wrapper .bx-prev{left:-40px;background:url({% static 'images/animation/controls.png' %}) 0 -32px no-repeat}.bx-wrapper img{max-width:100%;display:block;object-fit:scale-down;image-rendering:-moz-crisp-edges;background-color:#c2c1c19e}.bx-wrapper .bx-next{right:-40px;background:url({% static 'images/animation/controls.png' %}) -43px -32px no-repeat}.col-xs-12.padd_zero.ski_header{margin-bottom:-20px}.p_body.js__p_body{background:transparent!important}.flag-drop input[disabled]{background-color:#4ba14ca1;color:#000}.fixed-modal-footer{position:fixed;width:100%;bottom:0;background:#fff}.fixed-modal-header{position:fixed;width:100%;z-index:1;background:#fff}.loader{border:16px solid #f3f3f3;border-top:16px solid #3498db;border-radius:50%;width:120px;height:120px;animation:spin 2s linear infinite;position:absolute;right:0;left:0;top:200px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.plugin-map{position:absolute;z-index:1;top:0}.plugin-map img{margin:15px auto 0 30px;width:5.5vw}
    </style>
  {% endblock css %}

{% block content %}
  <div class="p_body js__p_body"></div>

  {% with skigit_id=skigit.id skigit_video_id=skigit.skigit_id.id %}
  <div class="modal-header no-mar" id="showModalpopup" >
    <div class="row mar_zero">
      <div class="col-xs-12 padd_zero ski_header">
        <div class="plugin-map">
          <a title="View the Plugin Map for this Skigit" data-toggle="modal" data-target="#pluginMapModal">
            <img src="{% static 'images/icons/Plugin_map.png' %}" class="img-responsive">
          </a>
        </div>

        <div class="col-xs-12 text-center padd_zero margin_top_10">

          <div class=" col-xs-12 padd_zero">
            <div class="col-xs-12 padd_zero text-center">
              <h2 class="modal-title f_type" id="myModalLabel">{{ skigit.title }}</h2>
            </div>
          </div>
				<div class="creator-info">
					<small class="f_type" id="skigit_popup_create_date">By
				{% if not is_anonymous %}
					<a class="blue f_type" target="_blank"
					href="{% url 'user_profile_display' skigit.skigit_id.user.username %}" style="font-size: 16px;">
					{{ skigit.skigit_id.user.username }}</a>
				{% else %}
					<a onclick="openMessage()" style="font-size: 16px;" id="creator">
					{{ skigit.skigit_id.user.username }}
					</a>
				{% endif %}
					on {{ skigit.published_at|date:"F d, Y"}}
				</small>
				</div>  
		    
		 
			
			<div class=" col-xs-12 padd_zero" id="awesome_product_category">   <!-- class = "about_your_things"  -->
				  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 padd_zero margin_top_10" id="Category_button">
              {% if not is_anonymous %}
                <a href="{{ skigit.subject_category.get_absolute_url }}" title="{{ skigit.subject_category }}" class="button" id="button_skigit_popup">
                  {% if skigit.subject_category|wordcount >= 3 %}{{ skigit.subject_category|truncatewords:3 }}  {% else %}
                    {{ skigit.subject_category }}
                  {% endif %}
                </a>
				
              {% else %}
                <a onclick="openMessage()" class="button" id="button_skigit_popup">
                  {% if skigit.subject_category|wordcount >= 3 %}{{ skigit.subject_category|truncatewords:3 }}  {% else %}
                    {{ skigit.subject_category }}
                  {% endif %}
                </a>
              {% endif %}
        </div>
		
			<div id="category_logo" class="col-lg-2 col-md-2 col-sm-6 col-xs-6 text-right">
          
            <a href="{{skigit_category.get_absolute_url}}" id="catid" style="color: #007cb9;">
              <span>{{skigit_category.cat_name}}</span>
            </a>

        </div>
     
		
		       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 padd_zero margin_top_10" id="business_embed">
          {% if is_business %}
            <a id='id_embed-skigit{{ skigit_id }}' onclick="internalEmbed{{ skigit_id }}()" title="Embed Skigit">
              <img src="{% static 'images/embed_skigit_red.png' %}" class="embed-skigit internel-embed">
            </a>

            <div id="confirmBox{{ skigit_id }}" class="f_type confirmBox">
              <center><p><img src="{% static 'images/logo.png' %}" style="width:80px;height:60px;margin-bottom:10px;"></p>
                Are you sure you want to Embed this Skigit into your Skigit company profile page?
              </center>
              <div class="del-bott">
                <button type="button" id="ok_embed_{{ skigit_id }}">Yes</button>
                <button type="button" id="no_embed_{{ skigit_id }}">Cancel</button>
              </div>
              <span id="embed_success_msg"></span>
            </div>

            <a id='id_internal_embed' title="Embed My Site">
              <img src="{% static 'images/embed_mysite_red.png' %}" class="embed-skigit embed-skigit-img">
            </a>

            <div class="embed-skigit-target">
              <!--<span class="f_type embed_title" style="color: #ffffff"> Embed Skigit</span>-->
              <img class="close_embed pull-right" src="{% static 'images/close(32x32).png' %}" height="30"
                   width="32"/>
              <hr>
              {% if embed_skigit_vid %}
                <div>
                  <span class="f_type">Copy and paste this code into your website</span>
                  <div id="id_embed_script" contenteditable="true" spellcheck="false" style="font-size: 14px;margin-top: 20px;margin-bottom: 20px;color: #9a2c2c;">
                    &ltiframe src="{{ request.scheme }}://{{ request.get_host }}/skigit-embed/{{ skigit.skigit_id.video_id }}/?href=
                    {% if default_logo %}{{ default_logo.logo.url }}{% endif %}" style="border: 0;
                    overflow:scroll; height: 400px; width: 400px;"&gt&lt/iframe&gt
                  </div>
                </div>
              {% else %}
                <div id="id_embed_ex_box{{ skigit_id }}" hidden>
                  <span class="f_type">Copy and paste this code into your website</span>
                  <div id="id_embed_script" contenteditable="true" spellcheck="false" style="font-size: 14px;margin-top: 20px;margin-bottom: 20px;color: #9a2c2c;">
                    &ltiframe
                    src="{{ request.scheme }}://{{ request.get_host }}/skigit-embed/{{ skigit.skigit_id.video_id }}/?href=
                      {% if default_logo %}{{ default_logo.logo.url }}{% endif %}" style="border: 0;
                    overflow:scroll; height: 400px; width: 400px;"&gt&lt/iframe&gt
                  </div>
                </div>
                <div id="id_embed_ex_info{{ skigit_id }}">
                  <center>
                    <p class="f_type"><img src="{% static 'images/logo.png' %}" style="width:80px;height:60px;"></p>
                    <p class="f_type" style="margin-bottom: 15px;font-size: 20px;">Wanna embed this Skigit into your website?</p>
                    <p class="f_type" style="margin: 0 10px 20px 0px;">Click the Copy button to copy the code. Then paste it into your website code to embed.</p>

                    <div class="del-bott">
                      <button type="button" id="id_ex_yes_embed_{{ skigit_id }}" style="margin-left: -10px;">Copy</button>
                    </div>
                  </center>
                </div>
              {% endif %}
              <div style="margin: 10px;">
                <span class="embed_preview" style="margin-top: 20px;">
                  <a id="show_preview{{ skigit_id }}">Show Preview</a>
                </span>
                <div id="_show_hide{{ skigit_id }}" style="display:none">
                  <iframe id='embed_preview{{ skigit_id }}'
                          src="/skigit-embed/{{ skigit.skigit_id.video_id }}/?href={% if default_logo %}{{ default_logo.logo.url }}{% endif %}"
                          style="border: 0; overflow:scroll; height: 200px; width: 350px;"></iframe>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
    </div>
        </div>
      </div>
    </div>
    <div class="modal-body no-mar">
      <div class="modal-body no-mar">
        <div class="te">
        </div>
      </div>
      <div class="row mar_zero">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padd_zero">
          <section id="iframe_margin">
            {% if skigit.skigit_id.youtube_url %}
	    <video id='id_homeframe{{ skigit_id }}' height="360" class='video-js vjs-default-skin vjs-fill vjs-big-play-centered' controls preload='auto'
                   poster="{{ skigit.skigit_id.thumbnails.all.0.get_absolute_url }}"
                   data-setup='{"controls": true, "autoplay": false, "preload": "auto", "fluid": true, "aspectRatio":"16:9", "controlBar": {"pictureInPictureToggle": false}}'>
                   <source src='{{ skigit.skigit_id.get_absolute_url }}' type="video/youtube" />
              <p class='vjs-no-js'>
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
              </p>
            </video>

            {% else %}
            <video id='id_homeframe{{ skigit_id }}' class='homeframe video-js vjs-default-skin vjs-fill vjs-big-play-centered' controls preload='auto'
                   poster="{{ skigit.skigit_id.thumbnails.all.0.get_absolute_url }}"
                   data-setup='{"controls": true, "autoplay": false, "preload": "auto", "fluid": true, "aspectRatio":"16:9"}'>
              <source src='{{ skigit.skigit_id.get_absolute_url }}' type="video/mp4" />
              <p class='vjs-no-js'>
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
              </p>
            </video>
            {% endif %}
          </section>
        </div>
      </div>

      <div class="row mar_zero">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 padd_zero margin_top_10">
          <div id="about_your_things" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 padd_zero margin_top_10">
              {% if not is_anonymous %}
                <a onclick="learnMoreClick({{ skigit_user_id }}, {{ skigit_video_id }}, '{{ skigit.bought_at_url }}')"
                   title="Learn More About my Awesome Thing" class="button" id="button_skigit_popup">Learn More
                </a>
              {% else %}
                <a href="#" title="Learn More About my Awesome Thing" onclick="openMessage()" class="button" id="button_skigit_popup">
                  Learn More
                </a>
              {% endif %}
            </div>
	 <div class="col-lg-8 col-md-8 col-sm-6 col-xs-6 padd_zero text-center margin_top_10 skigit_content_wrap" id="video_actions"  " data-skigt="{{ skigit_id }}">
          <ul id="video_actions_ul" class="list-inline" id="videoAction">
            <li id="bug_report" class="dropdown text-center">
              <a title="Bug" dropdown-toggle data-toggle="dropdown" >
                <img src="{% static 'images/icons/bug-report.png' %}" class="img-responsive" id="bug_icon"/>
              </a>
              <ul class="dropdown-menu flag-drop bug_pop">
                <div class="descibe" style="margin-bottom: -10px !important;margin-top: 20px;">
                 <center><img src="https://static.skigit.com/images/icons/bug-report.png" width="45px;" height="45px;" style="background-color: #d9e7ec;border-radius: 50%;padding: 6px;">
                  <h2><span id="bug_popup_title" style="margin-bottom: 10px;">Report a Bug</span>
                  </h2>
                  
          <div class="bug-box">
                    <form class="form-horizontal" id='bug_report_form{{ skigit_id }}' role="form">
                      {% csrf_token %}
                      {% if not is_anonymous %}
                        <div style="margin-bottom:5px;display: none;">
                          <span>Skigit ID / Page URL: {{ skigit_id }}</span>
                        </div>
                      {% endif %}
                      <input type="hidden" id="id_bug_skigit" name="bug_skigit" value="{{ skigit_id }}"/>
                      <input type="hidden" id="id_bug_title" name="bug_title" value="{{ skigit.skigit_id }}"/>
                      <input type="hidden" value="{{ skigit.title }}" id="id_bug_skigit_title" name="bug_skigit_title"/>
                      <input type="hidden" class="form-control" id="id_bug_url" name="bug_url"
                             value="{{ request.get_full_path }}">
                      <div class="form-group">
                        <div>
                          <!--<span>Please describe the problem in detail</span>-->
                        </div>
                        <textarea id="id_bug_description{{ skigit_id }}" name="bug_description"
                                  placeholder="Bug description" rows=5 style="width: 90%; margin-left:15px"></textarea>
                      </div>
                      <div class="form-group">
                        <div style="display: block;display: inline-block;font-size: 14px;margin-left: 30px;">
                          <span>Have you been able to reproduce the bug? </span>
                        </div>
                      </div>
            
              <div style="font-size: 16px;">
                         <input id="id_repeat_yes" name="repeat" class="bugpopupradiodrop" required="True"
                                   type="radio" value="1">&nbsp;Yes
                            <input style="margin-left: 20%;" id="id_repeat_no" name="repeat" class="bugpopupradiodrop" required="True"
                                   type="radio" value="0">&nbsp;No
                        </div>
                    </form>
                    <div class="form-group mrg-top bug_box_report">
                      <input type="button" onclick="bugSubmit({{ skigit_id }})" id="id_bug_submit1" name="bug_submit"
                             value="Submit"/>
                      <input type="button" id="inapp_form_can" onclick="bugCancel({{ skigit_id }})" value="Cancel"/>
                    </div>
                    <label class="form-group" style='width:100% !important;  font-family: segoe print; font-style:normal!important;'
                           id="bug_msg{{ skigit_id }}"/>
                  </div>
                </div>
              </ul>
        
            </li>
            {% if not is_anonymous %}
              <li class="text-center nav-item" id="plug_in_icon_adjust" style="margin-top: 2px;">
                <a href="{% url 'skigit_plugin' skigit_id %}"
                   title="plug In" class="nav-link">
                  <img src="{% static 'images/icons/plug.png' %}" class="img-responsive" >
                </a>
              </li>
              <li class="text-center nav-item" id="creator_icon_adjust">
                <a href="{% url 'my_skigits_view' skigit_user_id %}"
                   title="View artist's other Skigits">
                  <img src="{% static 'images/icons/eye.png' %}" >
                </a>
              </li>
              <input type="hidden" id="id_csrf_token" value="{{ csrf_token }}">

              {% if video_liked %}
                <li class="text-center">
                  <a class="like" onclick="like_unlike_entry_2('like_{{ skigit_video_id }}', {{ skigit_video_id }})" id="like_{{ skigit_video_id }}"
                     data-userid="1" title="Unlike" data-pid="{{ skigit_video_id }}">
                    <img src="{% static 'images/icons/heart_liked.png' %}" class="img-responsive"/>
                  </a>
                </li>
              {% else %}
                <li class="text-center">
                  <a class="unlike" onclick="like_unlike_entry_2('like_{{ skigit_video_id }}', {{ skigit_video_id }})" id="like_{{ skigit_video_id }}"
                     data-userid="1" title="Like" data-pid="{{ skigit_video_id }}">
                    <img src="{% static 'images/icons/heart_blue_detail_page.png' %}" 
                         class="img-responsive"  />
                  </a>
                </li>
              {% endif %}
              {% if video_follow %}
                <li class="followspan">
                  <a onclick="un_follow_follow()" id="follow_{{ skigit_user_id }}"
                     class="unfollow" data-cuid="{{ skigit_user_id }}"
                     title="Unfollow">
                    <img src="{% static 'images/icons/follow-golden.png' %}" >
                  </a>
                </li>
              {% else %}
                <li class="followspan">
                  <a onclick="un_follow_follow()" data-id="{{ request.user.id  }}" id="follow_{{ skigit_user_id }}"
                     class="follow" data-cuid="{{ skigit_user_id }}"
                     title="Follow">
                    <img src="{% static 'images/icons/follow.png' %}" >
                  </a>
                </li>
              {% endif %}
              <li class="text-center libnk_skigitshair">
                <a class="skigit_share share_popoverr1{{ skigit_id }}"
                   onclick="get_date_popup({{ skigit_id }})" data-toggle="clickover{{ skigit_id }}"
                   id="share_popoverr1{{ skigit_id }}">
                  <img src="{% static 'images/animation/50/PNG/Friends_4x4.png' %}"
                       class="share text-center" title="Share" id="share_icon" >
                </a>
              </li>
              <div class="tabbable hide custom_popup" id="shareContentt{{ skigit_id }}">
                <div class="tabbox">
                  <ul class="nav nav-tabs">
                    <li class="tab active"><a href="#sharetab1{{ skigit_id }}" data-toggle="tab">Skigit Friends</a></li>
                    <li class="tab"><a href="#sharetab2{{ skigit_id }}" data-toggle="tab" style="margin-left: 30px;">Email Friends</a></li>
                  </ul>

                  <div class="tab-content" style="padding-top: 8px">

                    <div class="tab-pane active" id="sharetab1{{ skigit_id }}">

                      {% if friend_list %}

                        <div class="row">
                          <div class="col-lg-12 col-md-12 col-sm-12 f_type">
                            <div class="col-lg-8 col-md-8 col-sm-8 " style="padding-bottom: 10px;">
                              <input type="text" class="search-query form-control f_type"
                                     id="friend_share_text{{ skigit_id }}" autocomplete="off" autocorrect="off"
                                     spellcheck="false" placeholder="Search friends by username" style="width: 250px;margin-left: 5px;"/>
                            </div>
                            <div class="col-lg-1 col-md-1 col-sm-1">
                              <label class="selectall_label" id="selectall_label{{ skigit_id }}" style="margin-left: 8px;">All </label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 check_box_sapn">
                                <input type="checkbox" value="" class="select_alll{{ skigit_id }}"
                                       name="select_alll{{ skigit_id }}" id="select_alll{{ skigit_id }}"/>
                              <label for="select_alll{{ skigit_id }}" class="selectall_label" id="selectall_label{{ skigit_id }}"></label>
                            </div>
                          </div>
                        </div>
                <!--   Friends count display ---->
                    <div id= "friends_count" >
                <span class="f_type" id="flabel_count" >{{ friend_list_count }} Friends </span>
                </div>
                        <ul class="list-group notification_ul"
                            id="fsharee{{ skigit_id }}">
                          {% for friend in friend_list %}
                            <li class="list-group-item col-lg-12 col-md-12 col-sm-12 f_type"
                                style="font-size: smaller; text-align: center;">
                              <div class="col-lg-10 col-md-10 col-sm-10">
                                  <a href="{% url 'user_profile_display' username=friend.username %}" style="margin-left: 0px;">
                                    <img class="avatar" id="share_avatar" height="30" width="30" src="{{ friend.image }}"/>
                                  </a>
                                  <a href="{% url 'user_profile_display' username=friend.username %}" style="margin-left: 0px;">
                                    <label class="f_type" style="width: auto; margin-left: 5px;">{{ friend.name }}</label>
                                  </a>
                                       <!--<label class="f_type share_date" id="id_date_label_popup2601" style="margin-left: 20px;Color: #000000;">Just now</label>-->
                                <label class="f_type share_date" id='id_date_label_popup{{ skigit_id }}{{ friend.uid }}'
                style="margin-left: 5px;margin-top: -18px;"
                                    {{ friend.share_date }}
                                </label>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2">
							    <div class="col-lg-6 col-md-6 col-sm-6" style="left: -34px;top: -4px;">
                                    <label id="circle" class="circle"{% if not friend.current_user_online %} style="background: #c3c3c3 !important;" {% else %} style="background: #95ff8d;"{% endif %}></label>
                                  </div>
								  
                                  <div class="col-lg-6 col-md-6 col-sm-6" style="float: none; left: -20px;">
                                    <input class="shareCheckBox" type="checkbox"
                                           onclick="shareboxx({{ friend.uid }},{{ skigit_id }})"
                                           name="shareboxx{{ skigit_id }}{{ friend.uid }}"
                                           value="{{ friend.uid }}"
                                           id="shareboxx{{ skigit_id }}{{ friend.uid }}"/>
                                    <label for="shareboxx{{ skigit_id }}{{ friend.uid }}" style="overflow: visible;"></label>
                                  </div>

                              </div>
                            </li>
                          {% endfor %}
                        </ul>

                        <div class="button_share_div">
                          <button class="button_share" id="button_share{{ skigit_id }}" name="button_share{{ skigit_id }}"
                                  onclick="shareToFriends({{ skigit_id }})" style="float:right">Share
                          </button>
                        </div>

                        <div>
                          <label id="msg{{ skigit_id }}" class="f_type" style="color: green;margin:0 0 0 20px; font-family:segoe print; font-size:11px"></label>
                        </div>

                      {% else %}

                        <ul class="list-group notification_ul "
                            id="frnd_notification">
                          <li class="f_type" style="align-content: center; text-align: center;">
                            <center>
                              <p>You have no friends added. To add friends, go to your Friends and Invite page.</p>
                            </center>
                          </li>
                        </ul>

                      {% endif %}

                    </div>

                    <div class="tab-pane" id="sharetab2{{ skigit_id }}">

                      <form id="email_share_formm{{ skigit_id }}">
                        {% csrf_token %}
                        <div class="form-group">
                          <input type="text" autocomplete="off" autocorrect="off" spellcheck="false"
                                 id="idEmailSharee" name="emailShareInputt"
                                 class="form-control f_type" placeholder="Enter your friend's email address">
                        </div>
                        <div class="form-group">
                          <input type="button" class="button_share" type="button"
                                 id="email_share_btnn{{ skigit_id }}" style="float:right;
                                                     margin-bottom: 20px;" value="Share"/>
                        </div>
                        <center>
                          <label for="idEmailSharee" class="f_type" id="share_success_labell{{ skigit_id }}" style="font-family: segoe print")></label>
                        </center>
                        <label for="idEmailSharee" id="share_error_labell" class="error" style="top: 0px;position: relative;width: 70%;"></label>
                      </form>

                    </div>

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

              {% if video_favorite %}
                <li class="text-center">
                  <a class="favorite" onclick="fav_un_fav()" id="fav_{{ skigit_video_id }}"
                     data-userid="1" title="Remove Favourite"
                     data-pid="{{ skigit_video_id }}">
                    <img src="{% static 'images/icons/favorites_golden.png' %}" class="img-responsive" />
                  </a>
                </li>
              {% else %}
                <li class="text-center">
                  <a class="unfavorite" onclick="fav_un_fav()" id="fav_{{ skigit_video_id }}"
                     data-userid="1" title="Add to Favourite"
                     data-pid="{{ skigit_video_id }}">
                    <img src="{% static 'images/icons/favorites.png' %}" class="img-responsive" style="width: 2.8vw;margin-top: 5px;"/>
                  </a>
                </li>
              {% endif %}
            {% else %}
              <li class="text-center" id="plug_in_icon_adjust" style="margin-top: 2px;">
                <a onclick="openMessage()" title="plug In">
                  <img src="{% static 'images/icons/plug.png' %}" class="img-responsive" >
                </a>
              </li>
              <li class="text-center" id="creator_icon_adjust" style="margin-top: 10px;">
                <a onclick="openMessage()"   title="View creators other Skigits ">
                  <img src="{% static 'images/icons/eye.png' %}" >
                </a>
              </li>
              <li class="text-center">
                <a class="liked" onclick="openMessage()"  title="Like">
                  <img src="{% static 'images/icons/heart_liked.png' %}" class="img-responsive" />
                </a>
              </li>

              <li class="followspan">
                <a onclick="openMessage()"  title="Follow">
                  <img src="{% static 'images/icons/follow.png' %}">
                </a>
              </li>
              <li class="text-center">
                <a onclick="openMessage()"  title="Share">
                  <img src="{% static 'images/icons/sharing.png' %}" class="img-responsive">
                </a>
              </li>
              <li class="text-center">
                <a class="favorites" onclick="openMessage()"
                   title="Add to Favourite">
                  <img src="{% static 'images/icons/favorites.png' %}" class="img-responsive" />
                </a>
              </li>
            {% endif %}

            <li class="text-center" id="statistic">
              <a id='id_statistic' title="Statistics" onclick="get_statistics_count({{ skigit_video_id }})">
                <img src="{% static 'images/icons/statistics.png' %}" class="img-responsive count-s" >
              </a>

              <div class="count-target">
                <span class="glyphicon glyphicon glyphicon-triangle-top"></span>
                <ul>
                  <li><span>Plugs</span></li><li><label id="id_plug_count">0</label></li>
                  <li><span>Views</span></li><li><label id="id_view_count">0</label></li>
                  <li><span>Favorites</span></li><li><label id="id_favorites">0</label></li>
                  <li><span>Likes</span></li><li><label id="id_likes">0</label></li>
                  <li><span>Shares</span></li><li><label id="id_share">0</label></li>
                </ul>
              </div>
            </li>

            {% if not is_anonymous %}
              <li class="text-center" id="copyright">
                <a title="Copyright"  href="{% url 'copyright_infringement' skigit_id %}">
                  <img
                      src="{% static 'images/icons/copyright.png' %}" class="img-responsive" style="width: 60px;">
                </a>
              </li>
              <li id="inappropriate" class=" dropdown text-center" style="margin: 0 -10px 0 -10px;">
                <a title="Inappropriate" dropdown-toggle data-toggle="dropdown">
                  <img
                      src="{% static 'images/icons/flag.png' %}" class="img-responsive" id="flag_icon" style="width: 60px;">
                </a>
                <ul class="dropdown-menu flag-drop">
                  <div class="descibe">
                    <!--<span class="glyphicon glyphicon glyphicon-triangle-top"></span>-->
                    <center><img src="https://static.skigit.com/images/icons/flag.png" width="45px;" height="45px;" style="margin-top: 20px;background-color: #d9e7ec;border-radius: 50%;padding: 6px;">

                    <h2>Inappropriate Skigit</h2>
                    <div class="reason-box">
                      <form action="" method="post" id="inapp_form{{ skigit_id }}">
                        {% csrf_token %}
                        <!--<b style="font-weight: normal;"> Reason:</b>-->
                        {% for reasion in all_reason %}
                          <div class=" form-group list-group-item"
                               style="border: none; background: transparent; background-color: transparent; margin-bottom:-15px; ">
                            <label style="color:#ffffff">
                              <input type="radio" skigit_reasons="{{ reasion.id }}" skigit_id="{{ skigit_video_id }}"
                                     value="{{ reasion.id }}" id="{{ reasion.id }}" name="skigit_reasons"/>
                              {{ reasion.reason_title }}
                            </label>
                          </div>
                        {% endfor %}
                        <input type="hidden" name="csrfmiddlewaretoken" value="$csrf_token"/>
                      </form>
                      <div class="form-group mrg-top flag_btn">
                        <input type="button" onclick="flagSubmit({{ skigit_id }})" id="inapp_form_sub" value="Submit">
                        <input type="button" onclick="flagCancel({{ skigit_id }})" id="inapp_flag_can" value="Cancel">
                      </div>
                      <div class="form-group mrg-top" style="text-align: center; font-family: segoe print; width:120%; margin-left:-20px">
                        <label class="form-group"  style="font-family: segoe print"
                               id="flag_msg{{ skigit_id }}"/>
                      </div>
                    </div>
                  </div>
                </ul>
              </li>
            {% else %}
              <li class="text-center">
                <a title="Copyright" onclick="openMessage()" >
                  <img src="{% static 'images/icons/copyright.png' %}" class="img-responsive">
                </a>
              </li>
              <li id="inappropriate" class="dropdown text-center">
                <a title="Inappropriate" onclick="openMessage()" >
                  <img src="{% static 'images/icons/flag.png' %}" class="img-responsive" id="flag_icon" style="width: 60px;">
                </a>
              </li>
            {% endif %}
              <li class="text-center" id="comments">
                <a class="comments"
                   title="Add to Comment" data-toggle="modal" data-target="#commentsModal">
                  <img src="{% static 'images/icons/comments.png' %}" class="img-responsive" style="width: 60px;"/>
                </a>
              </li>
          </ul>
        </div>
        {% if default_logo and  default_logo.logo.url %}
          <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6 padd_zero text-center margin_top_10" id="video_logo">
                {% if not is_anonymous %}
                  <a href="javascript:void(0);" onclick="logoclick({{ default_logo.id }}, '/sperk/{{ skigit.made_by.id }}/{{ default_logo.id }}/');return true;">
                {% else %}
                  <a onclick="openMessage()" >
                {% endif %}
                  <img class="img-responsive" id="bs_logo" src="{{ default_logo.logo.url }}"/>
                </a>
         </div>
       {% endif %}
       </div>

      </div>
      <div class="row mar_zero share-ico">
        <div class="col-lg-3 col-md-3"></div>
      </div>
	        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin_top_10 padd_zero sm-txt" id="quote-block">

        <p class="title_vediocontain" id="why_rocks_full" style="display:none">{{ skigit.why_rocks }}
          <a onclick="hide_Text()" style="color: #037bb8 !important; display:none;" id="hide_text" name="hide_text">
            Show less
          </a>
        </p>
        <p class="title_vediocontain" id="why_rocks_half"><span id="quote"><img src="https://static.skigit.com/images/Quote_icon.png" width="40" style="margin-top:-20px"></span>
           {{ skigit.why_rocks|truncatewords:40 }}
          {% if skigit.why_rocks|wordcount > 40 %}
            <a onclick="read_More()" style="color:#037bb8 !important;" id="read_more" name="read_more">
              Read more
            </a>
          {% endif %}
        </p>
      </div>

      <div class="row mar_zero">
        <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <input type="hidden" id="id_time_zone" name="time_zone" value="">
          <ul class="share-ico text-center" id="post_to">
		  <p id="post_to_title">Post To</p>
            <li>
              <a id="fb_post" title="Facebook"
                 onclick="socialPost({{ skigit_video_id }}, {{ skigit_user_id }}, 'facebook');">
                <img src="{% static 'images/icons/SN Post FB.png' %}" style="width: 5vw;" >
              </a>
            </li>
            <li>
              <a title="Twitter"
                 onclick="socialPost({{ skigit_video_id }}, {{ skigit_user_id }}, 'twitter');">
                <img src="{% static 'images/icons/SN Post Twitter.png' %}" style="width: 5vw;" >
              </a>
            </li>
            <li>
              <a title="Tumblr"
                 onclick="socialPost({{ skigit_video_id }}, {{ skigit_user_id }}, 'tumblr');">
                <img src="{% static 'images/icons/SN_link_Tumblr.png' %}" style="width: 5vw;" >
              </a>
            </li>
            <li>
              <a title="Linkedin"
                 onclick="socialPost({{ skigit_video_id }}, {{ skigit_user_id }}, 'linkedin');">
                <img src="{% static 'images/icons/SN Post LinkedIn.png' %}" style="width: 5vw;" >
              </a>
            </li>
            <li>
              <a title="Pinterest"
                 onclick="socialPost({{ skigit_video_id }}, {{ skigit_user_id }}, 'pinterest');">
                <img src="{% static 'images/icons/SN Post Pinterest.png' %}" style="width: 5vw;" >
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <span class="hide" id="social-share-url">https://{{ request.get_host }}/skigit_data/{{ skigit_id }}/</span>
    
    <div class="row mar_zero f_type">
	  
    </div>

    <div class="txt_bxhead">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">

        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100%;">
          <span class="txt_bxsldhead">Recommended Just for You</span>
        </div>
      </div>
    </div>

    <div class="row mar_zero f_type">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padd_zero">
        <div id="ca-container" class="ca-container">
          <div class="ca-wrapper">
            <div class="slider1">
              {% for vid in all_sub_cat_skigits %}

                <div class="slide">
                  <div class="ca-item ca-item-1" data-skigt="{{ vid.id }}">
                    <div class="padd-l-r">
          <h4>{{ vid.title|slice:"0:12" }}</h4>
                      <a href="{% url 'skigit_data' vid.pk %}?modal=1"
                         id="sugestion{{ vid.id }}" title="Play {{ vid.title }} Skigit"
                         data-target="#new_vid{{ vid.id }}"
                         class="skigit_playback f_type">
                        <img src="{{ vid.skigit_id.thumbnails.all.0.url }}">
                      </a>
                    </div>
                  </div>
                </div>

              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="share-modal" role="dialog" style="display:none">
    <div class="modal-dialog modal-md">
      <!-- Modal content base.html-->
      <div class="modal-content" style="-webkit-box-shadow: none;box-shadow: none;border:none">
      </div>
    </div>
  </div>

<!-- Modal -->
<div id="commentsModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content" style="overflow-y: auto;max-height: 590px;min-height: 590px">
        <div class="modal-header fixed-modal-header">

            <p id="comment_box{{ skigit_id }}" class="title_commentscontain f_type" style="font-size: 24px;
          text-align: center;border-radius: 50px;padding: 10px !important;width: 60%;
          text-align: center;margin-left: auto;margin-right: auto; font-size: 28px; ">
              <span>Comment on this Work of Art</span>
              <span id="btn_fb_comment_expand{{ skigit_id }}" title="Hide" class="fb_cmm_expand"> ... </span>
            </p>
        </div>
      <div class="modal-body" style="border: 1px solid white">
          <div class="loader"></div>
          <div id='div_{{ skigit_id }}' class="row mar_zero margin_top_10" style="min-height: 400px;margin-top:100px;">


            <div id="fbcomment{{ skigit_id }}" style="margin-left:16px;transform: scale(0.96); ">
              <center><img src="{% static 'images/inf_loading.gif' %} " id="fb_loader" style="display: none"></center>
              <div class="fb-comments"
                   data-href="https://{{ request.get_host }}/skigit_data/{{ skigit_id }}/#configurator{{ skigit_id }}"
                   data-width="850" data-numposts="2"></div>
            </div>

          </div>
      </div>
      <div class="modal-footer fixed-modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" style="position: fixed;right: 130px">Ok</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

{% include 'includes/plugin_map.html' %}

    <!-- follow modal box -->
<div class="overlay"></div>
<div id="followBox">
  <div style="text-align: center !important;">
    <p>
      <img src="https://static.skigit.com/images/logo.png" alt="Skigit logo" style="width:80px; height:60px">
    </p>

    <p id="confirm_logout_text" style="padding: 0px 0; margin: 0 0 25px!important">Cmon, follow yourself, really?!!!</p>

    <div class="del-bott" style="padding-bottom: 20px">
      <button type="button" onclick="close_followBox()" id="ok_logout_logo">Not Happening</button>
    </div>
  </div>
</div>
{% endwith %}
{% endblock content %}

{% block js %}
  {% include 'includes/skigit_data_js.html' %}
  <script type="text/javascript" src="{% static 'js/packages/jquery.validate-1.11.1.js' %}"></script>
{% endblock js %}

{% block js-from-url %}
  <script type="text/javascript" src="https://www.youtube.com/player_api"></script>
{% endblock %}