{% extends "index-base.html" %}

{% block style_links %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/pages/index-feed.css')}}">
{% endblock %}

{% macro render_tag(tag, post_id) %}

{% set tag_flat = tag.replace("/", "__") %}
    <a  href="/tag_pages?tag={{ tag|urlencode }}"
        data-tag-name="{{ tag_flat }}"
        data-container="body"
        data-toggle="popover"
        data-placement="bottom"
        data-html="true"
    {% if tag in feed_params['subscriptions'] %}
        class="label label-tag label-subscribed pop"
        data-content="<div class='content'>
            <button class='btn btn-small btn-primary btn-unsubscribe'
                    id='tag-subscription-{{post_id}}__{{tag_flat}}'>
                <i class='glyphicon glyphicon-remove-sign glyphicon-white'></i>Unsubscribe
            </button></div>"
    {% else %}
        class="label label-tag label-unsubscribed pop"
        data-content="<div class='content'>
            <button class='btn btn-small btn-default btn-subscribe'
                    id='tag-subscription-{{post_id}}__{{tag_flat}}'>
                <i class='glyphicon glyphicon-ok-sign glyphicon-filled'></i>Subscribe
            </button></div>"
    {% endif %}
        class="text">
      {{ "#" + tag }}
    </a>
{% endmacro %}

{% block inner_content %}

<div id="feed-posts">
    {% for post in posts %}
    <div class="row feed-post" data-path='{{post.path|urlencode}}' data-url="{{url_for('posts.render', path=post.path)}}">
        <div class='feed-thumbnail'>
            <img src="{{ post['thumbnail'] if post['thumbnail'] else '/static/images/default_thumbnail.png' }}" />
        </div>
        <div class='feed-metadata'>
                <span class="feed-title">{{ post.title }}</span>
                <span class="feed-authors"> {{ format_authors(post.authors)|safe }}</span>
                <span class="feed-tags">
                    {% for tag_obj in post.tags %}
                        {{ render_tag(tag_obj.name, loop.index0) }}
                    {% endfor %}
                </span>
                <span class='feed-tldr'>{{ post['tldr']|safe }}</span>
                <span class='feed-tldr-expander'>+ Show More</span>
                <span class='feed-stats'>
                    {% set stats = post_stats[post.path] %}
                    <span title="Users who Viewed"><i class="glyphicon glyphicon-eye-open"> </i> {{ stats['distinct_views'] }}</span>
                    <span title="Number of Favorites"><i class="glyphicon glyphicon-heart-empty"></i> {{ stats['total_likes']}}</span>
                    <span title="Comments"><i class="glyphicon glyphicon-comment"></i> {{ stats['total_comments']}}</span>
                </span>
                <span class="feed-dates">Created on {{ post.created_at.strftime("%B %d, %Y") }} (last updated {{ post.updated_at.strftime("%B %d, %Y") }})</span>
        </div>
    </div>
    {% endfor %}
</div>

{% endblock %}

{% block scripts %}
{{ super () }}
<script src="{{ url_for('static', filename='js/pages/index-feed.js') }}"></script>
<script src="{{ url_for('static', filename='js/helpers.js')}}" type='text/javascript'></script>
<script src="{{ url_for('static', filename='js/tags.js')}}" type='text/javascript'></script>
<script type="text/javascript">

  $(".pop").popover({ trigger: "manual" , html: true, animation:false, delay: 100})
    .on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
  });


   $(document).ready(function(){
      // make the right button active

      var card_button = $(".btn-card")[0];
      $(card_button).addClass("btn-active");
      var glyphicon = $(".glyphicon-post-org.glyphicon-align-justify")[0] ;
      $(glyphicon).addClass("glyphicon-active");

      var start = {{ feed_params['start']|default(0) }};
      var results = {{ feed_params['results']|default(10) }};
      var next_start = start + results;
      var prev_start = start - results;
      var filters;
      {% if feed_params['filters'] %}
      var filters = "{{ feed_params['filters'] }}";
      {% endif %}

    $(".next_btn").on("click", function(){
      helpersJx.changePage(next_start, results, filters)
    });

    $(".prev_btn").on("click", function(){
      helpersJx.changePage(prev_start, results, filters)
    })

    $(document.body).on('click',"button[id^=tag-subscription]",function () {
      tagsJx.addTagSubscriptionListener($(this)[0]);
    });
  });
</script>
{% endblock %}
