{% extends 'base_index.html' %}
{% load static %}


{% block head_title %}{{ article.social.title }}{% endblock %}
{% block title %}{{ article.title }}{% endblock %}

    {% block head %}
        {{ article.css|safe }}
        <script src="/static/js/library.js"></script>
    {% endblock %}

{% block head_description1 %}{{ article.social.description }}{% endblock %}
{% block head_description2 %}{{ article.social.description }}{% endblock %}

{% block head_image %}{{ article.social.image }}{% endblock %}

{% block app-content-body  %}style="background:#fff;"{% endblock %}

{% block content %}
    {{ article.page|safe }}
    <script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>

    <div style="    text-align: center;
    width: 80%;
    margin: 0 auto;">
    <div style="text-align: left;margin: 50px 0;float: left;">
        <i class="glyphicon glyphicon-tags" style="float: left;    padding: 5px;
    margin-right: 10px;"></i>
        {% for tag in article.tags.content %}
            <span class="tag">#{{ tag.name }}</span>
        {% endfor %}
    </div>
    <table width="100%" style="clear: both;" class="hidden-xs">
        <tr>
            <td valign="top" style="    float: left;
    color: #000;
    font-size: 15px;">
                <div style="float: left;">Понравилась статья?<br>
        Поделись с друзьями:</div><div class="ya-share2" style="padding: 10px;float: left;    margin-left: 20px;" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter,linkedin"></div></td>
            <td valign="top"><button class="btn btn-warning" style="border-radius: 3px;padding: 10px;float: right;" onclick="set_like({{ article.id }})">Сказать спасибо <i class="glyphicon glyphicon-thumbs-up" style="margin-left: 10px;    position: relative;
    top: 3px;"></i> <span name="like_count">{{ article.get_likes_length }}</span></button><br>
            <span style="    clear: both;{% if not article.like %}display: none;{% endif %}
    text-align: right;
    float: right;
    font-size: 11px;
    color: #999;
    padding-top: 10px;" name="like_thanks">* Спасибо,<br> что оценили нашу работу</span></td>
        </tr>
    </table>
    <div class="visible-xs" style="clear: both;">
            <p valign="top" style="
    color: #000;
    font-size: 15px;">Понравилась статья?<br>
        Поделись с друзьями:</p>
            <p valign="top"><div class="ya-share2" style="padding: 10px;    margin: 20px 0;" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter,linkedin"></div></p>
            <p valign="top"><button class="btn btn-warning" style="border-radius: 3px;padding: 10px;" onclick="set_like({{ article.id }})">Сказать спасибо <i class="glyphicon glyphicon-thumbs-up" style="margin-left: 10px;    position: relative;
    top: 3px;"></i> <span name="like_count">{{ article.get_likes_length }}</span></button><br>
            <p style="    clear: both;{% if not article.like %}display: none;{% endif %}
    text-align: center;
    font-size: 11px;
    color: #999;
    padding-top: 10px;" name="like_thanks">* Спасибо,<br> что оценили нашу работу</p></p>
    </div>

    </div>

    <div class="row" style="    box-sizing: border-box;padding: 40px;clear: both;margin-top: 40px;">
        {% include 'comments_block.html' %}
    </div>
    
    <div id="nav_block">
        <div id="nav_in">
            <span id="button" data-toggle="tooltip" data-placement="bottom" title="Назад" onclick="location.href = '{{ DOMAIN }}library/articles/';"><i class="glyphicon glyphicon-arrow-left"></i> назад</span>
            <hr noshade>
            <span id="button" class="{% if article.like %}active{% endif %}" data-toggle="tooltip" data-placement="bottom" title="Нравится" onclick="{% if not article.like %}ajax_set_like{% else %}ajax_unset_like{% endif %}(this)" article_id="{{ article.id }}"><i class="glyphicon glyphicon-thumbs-up"></i> </span>
            <span id="button" class="{% if article.favorite %}active{% endif %}" data-toggle="tooltip" data-placement="bottom" title="В избранное" onclick="{% if not article.favorite %}ajax_set_favorit{% else %}ajax_unset_favorit{% endif %}(this)" article_id="{{ article.id }}"><i class="glyphicon glyphicon-star "></i></span>
            <hr noshade>
            <span id="button" data-toggle="tooltip" data-placement="bottom" title="Случайная статья" onclick="location.href = '/library/article/' + get_random_article('{{ article.id }}');"><i class="glyphicon glyphicon-retweet"></i></span>
        </div>
    </div>
    <input name="ARTICLE_ID" value="{{ article.id }}" readonly style="display: none;">
{% endblock %}

    {% block js %}

        {% if not request.user.is_authenticated %}
            <script>
                setTimeout(function() { $('#ArticleRegister').modal('show'); }, 30000);
            </script>
        {% endif %}
        <script>
        $(function() {
            $(window).scroll(function () {
                if ($(this).scrollTop() != 0) {
                    $('#nav_block').fadeIn();
                } else {

                    $('#nav_block').fadeOut();
                }
            });

            load_lesson_comments();
            if ($('#myModal1').length == 0) {
                window.EDITOR = new Simditor({
                textarea: $('[name=comment_sent_text]')})
            }
            $("a#single_image").fancybox();
            setInterval(function () {
                        get_lesson_comments_length();
                        refresh_like($('[name=ARTICLE_ID]').val())
                    }
                    , 2000);
            $('[data-toggle="tooltip"]').tooltip();
        })
            </script>

        {{ article.js|safe }}
    {% endblock %}