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

{% block inner_content %}

  <br>

  {% for post in posts %}
    {% set idx_item = loop.index0 %}
    {% set stats = post_stats[post.path] %}
    <div class='row row-space-4 panel feed-post'>
      <div class='panel-header panel-light'>
        <div class = "col-md-10">
          <a href="{{'/render?markdown=' + post.path|urlencode }}">
            {{ post.title |title }}
          </a>
        </div>
        <div class='feed-post-counts'>
          <i class="glyphicon glyphicon-eye-open"> </i> {{ stats['distinct_views'] }}&nbsp
          <i class="glyphicon glyphicon-heart-empty"></i> {{ stats['total_likes']}}&nbsp
          <i class="glyphicon glyphicon-comment"></i> {{ stats['total_comments']}}
        </div>
      </div>
      <div class='panel-body'>
        <div class="col-md-6">
          <ul class="post-list" style='list-style-type: none; padding-left: 0px'>
            <li class="feed-author"> {{ format_authors(post.authors)|safe }}</li>
            <li class="feed-date"> Updated: {{ post['updated_at'].date().isoformat() }}</li>
            <li class="feed-tags">
              {% for tag_obj in post.tags %}
                {% set tag = tag_obj.name %}
                {% 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'
                               title=''
                               id='tag-subscription-{{idx_item}}__{{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'
                             title=''
                             id='tag-subscription-{{idx_item}}__{{tag_flat}}'>
                         <i class='glyphicon glyphicon-ok-sign glyphicon-filled'></i>Subscribe
                       </button></div>"
                    {% endif %}
                    class="text">
                  {{ "#" + tag}}
                </a>
              {% endfor %}
            </li>
          </ul>
          <p class="feed-tldr">
            <i>{{ post['tldr']|safe }}</i>
            <br>
            <br>
            <a href="{{'/render?markdown=' + post.path|urlencode }}">Read post</a>
          </p>
        </div>
        <div class="col-md-6">
          <center><img src="{{ post['thumbnail'] if post['thumbnail'] else '/static/images/default_thumbnail.png' }}" style="max-width:100%;max-height:225px" /></center>
        </div>
      </div>
    </div>
  {% endfor %}

{% endblock %}

{% block scripts %}
{{ super () }}
<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 %}
