{% extends "base_list.html" %}
{% load static %}

{% block title %}{{object.title}}{% endblock %}

{% block head_extra %}
<style>
  .webpage-metadata {border: 1px solid #aaa; border-top:none; border-right:none; line-height:0.65em;padding-top:10px;}
  .webpage-body {width:40em; text-align:justify; padding-top:20px; font-family:serif; font-size:1.25em; line-height:1.6em; border-right: 1px #ccc solid; padding-right: 2em;}
  .webpage-body br { margin-bottom: 1em; }
</style>
<link href="{% static 'css/recogito.min.css' %}" rel="stylesheet">
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/recogito.min.js' %}"></script>
<script type="text/javascript">
(function() {
    var r = Recogito.init({
    content: document.getElementById('article') // ID or DOM element
    });

    // Add an event handler
    r.on('createAnnotation', function(annotation) { /** **/ });
})();
</script>
{% endblock %}

{% block lists %}
<div class="row webpage">
    <div class="webpage-metadata">
      <p>Source: <a href="{{object.url}}">{{object.domain}}</a></p>
      {% if object.date %}<p>Published: <em>{{object.date}}</em></p>{% endif %}
      <p>Time to read: {{object.estimated_time_to_read_in_minutes}} minutes</p>
    </div>
    {% if object.extract %}
    <div class="webpage-body" id="article">
      {{object.extract|linebreaks}}
    </div>
    {% endif %}
    <hr/>
</div>
<div class="row">
    <div class="col-md">
        <h3>Last scrobbles</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                {% for scrobble in scrobbles.all %}
                <tr>
                    <td>{{scrobble.local_timestamp}}</td>
                </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}