{% extends "base.html" %}
{% load md2 %}
{% load thumbnail %}


{% block content-header %}
<div class="row justify-content-left">
  <div class="col-md-6 offset-md-1">
    <p>La revue de presse recense les articles de presse relatifs aux sujets de la Quadrature, compilés par ses bénévoles.
Voir aussi notre revue de presse internationale.</p>
  </div>
  <div class="col-md-4">
  </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
<div class="col-md-12 white-bg">

  <div class="well">
    {% if is_paginated %}
      <div class="pagination">
        <span class="page-links">
          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
          {% endif %}
          <span class="page-current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
          </span>
          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
          {% endif %}
        </span>
      </div>
    {% endif %}

    <div class="row">
    <div class="col-md-10 offset-1">

    {% for article in object_list %}
    <section class="article-card d-flex">
      <div class="article-card-img">
        {% thumbnail article.screenshot "800x400" crop="smart" as im %}
        <img src="{{ im.url }}" width="400" height="200">
        {% endthumbnail %}
        <a href="{{article.url}}"><span class="fa fa-external-link fa-2x"></span></a>
      </div>
      <div class="article-card-content">
        <p class="tags-list">
          {% for t in article.tags.all %}
          <a href="#" class="">{{t}}</a>
          {% endfor %}
        </p>
        <h4><a href="{{article.url}}">{{article.title}}</a></h4>
        {% comment %} <p class="subtitle">via Le Monde le {{article.created_at |date:'d/m'}}</p> {% endcomment %}

        <div class="read-more-box">
          {{ article.extracts |markdown }}
          <p class="read-more"><a href="#" class="btn btn-secondary">Read More</a></p>
        </div>
      </div>
    </section>
    {% endfor %}
  </div>

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

<script>
  $(".read-more-box .btn").click(function() {
    var totalHeight = 0;

    var el = $(this);
    var p  = el.parent();
    var up = p.parent();
    var ps = up.find("p:not('.read-more')");

    // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
    ps.each(function() {
      totalHeight += $(this).outerHeight(true);
    });

    up.css({
      // Set height to prevent instant jumpdown when max height is removed
      "height": up.height(),
      "max-height": 9999
    }).animate({
      "height": totalHeight
    });

    // fade out read-more
    p.fadeOut();

    // prevent jump-down
    return false;
  });
</script>
{% endblock %}