{% extends 'base_index.html' %}
{% block title %}Статьи{% endblock %}
{% block head %}
	<link rel="stylesheet" type="text/css" href="/static/css/flickity.css" />
	<link rel="stylesheet" type="text/css" href="/static/css/component.css" />
    <script src="/static/js/modernizr.custom.js"></script>
    <script>
        window.favorite_count = 0;
    </script>
{% endblock %}
{% block content %}
<div class="col">
    <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-lg-12 col-xs-12">
          <h1 class="m-n font-thin h3" style="    margin-left: 10px !important;">
              Обучающие статьи
              <div style="float: right;font-size: 12px;color: #999;" class="hidden-xs">
                  <span class="hidden-xs">Все статьи</span>
                <label class="i-switch bg-success" style="top: 5px;
    position: relative;    margin: 0 5px;">
                    <input type="checkbox" name="by_radio">
                    <i></i>
                </label><span class="hidden-xs">Непрочитанные</span>
              </div>
          </h1>
        </div>
      </div>
    </div>
		<div class="nav-tabs_self filter" name="section_list">
			<button class="action filter__item filter__item--selected" data-filter="*">Все статьи <span style="margin-left: 5px;" class="label label-success" name="all_count">{{ articles|length }}</span></button>
            <div style="    float: right;
    padding: 10px 0;
    color: #ccc;
    font-size: 13px;" data-toggle="tooltip" data-placement="top" title="Всего просмотров" class="hidden-xs"><i class="glyphicon glyphicon-eye-open" style="    top: 2px;
    left: -5px;"></i> <span name="all_article_views">{{ views }}</span></div>
		</div>
	<!-- Main view -->
	<div class="view">
		<!-- /grid-->

    <section class="grid">
    <img class="grid__loader" src="/static/img/preloader.gif" width="60" alt="Loader image">
    <div class="grid__sizer"></div>
    <p style="clear: both;"></p>

        {% for article in articles %}
                <script>
                if ($('[section_view={{ article.section.id }}]').length == 0){
                    $('[name=section_list]').append('<button class="action filter__item" data-filter=".article_section_{{ article.section.id }}" section_view="{{ article.section.id }}">{{ article.section.title }} <span style="margin-left: 5px;" class="label label-success" name="{{ article.section.id }}_count">0</span></button>')

                }
                </script>
                <div article_id="{{ article.id }}" class="grid__item article_section_{{ article.section.id }} {% if article.favorite %}article_section_favorite{% endif %}" section="{{ article.section.id }}" favorite="{{ article.favorite }}" viewed="{{ article.view }}">
                            <div class="favorite"><i class="glyphicon glyphicon-star" id="{% if article.favorite %}active{% endif %}" onclick="{% if not article.favorite %}set_favorit(this){% else %}unset_favorit(this){% endif %}" article_id="{{ article.id }}"  data-toggle="tooltip" data-placement="top" title="Добавить в избранное"></i></div>
                            <a href="{{ DOMAIN }}/library/article/{{ article.slug }}"><img style="width:100%;" src="{{ article.preview.image }}"></a>
                            <div class="content">
                                <div class="section_block"><span class="section">{{ article.section.title }}</span><span class="date">{{ article.date }}</span></div>
                                <div class="title"><a href="{{ DOMAIN }}/library/article/{{ article.slug }}">{{ article.preview.title }}</a></div>
                                <div class="preview">{{ article.preview.description }}</div>
                                {% if article.tags %}
                                <div class="tags">{% for tag in article.tags.content %}<span class="tag">#{{ tag.name }}</span>{% endfor %}</div>
                                {% endif %}
                            </div>
                            <div class="bottom">
                                <a href="{{ DOMAIN }}/library/article/{{ article.slug }}"><button class="btn" role="button">Читать статью</button></a>
                                <div class="icons">
                                    <span class="favorite_length" data-toggle="tooltip" data-placement="top" title="В избранном"><i class="glyphicon glyphicon-star"></i> {{ article.favorites.count }}</span>
                                    <span class="views" data-toggle="tooltip" data-placement="top" title="Просмотров"><i class="glyphicon glyphicon-eye-open"></i> {{ article.views.count }}</span>
                                    <span class="likes" data-toggle="tooltip" data-placement="top" title="Поставлено лайков"><i class="glyphicon glyphicon-thumbs-up"></i> {{ article.likes.count }}</span>
                                </div>
                                <div style="margin: 0;clear: both;"></div>
                            </div>

        <script>
                if (!window.section_{{ article.section.id }}){
                    window.section_{{ article.section.id }} = 1;
                } else {
                    window.section_{{ article.section.id }} += 1;
                }
                {% if article.favorite %}
                    window.favorite_count += 1;
                {% endif %}
                $('[name={{ article.section.id }}_count]').html(window.section_{{ article.section.id }});
                //check_favorit({{ article.id }})
        </script>
                </div>

        {% endfor %}
        <script>

            $('[name=section_list]').append('<button {% if not request.user.is_authenticated %}onclick="$(\'#myModal1\').modal(\'show\')"{% endif %} style="border: 1px solid #ffcd00; border-radius: 3px;" name="favorite_button" class="action filter__item" data-filter=".article_section_favorite">Избранное <span style="margin-left: 5px;" class="label label-success" name="favorite_count">0</span> </button>')
        </script>
    </section>
    </div>
</div>
{% endblock %}
{% block js %}
	<script src="/static/js/isotope.pkgd.min.js"></script>
	<script src="/static/js/flickity.pkgd.min.js"></script>
    <script src="/static/js/articles_sort.js"></script>
    <script src="/static/js/library.js"></script>
    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
            if ($('[favorite=True]').length < 0){
                $('[name="favorite_count"]').fadeOut('fast');

            } else {
                $('[name="favorite_count"]').html(window.favorite_count);
            }
        setInterval(function () {
            get_all_views_length()
        }, 3000)
        })
    </script>
{% endblock %}