{% extends "layout.html" %}
{% block head %}
{{ super() }}
<script src="https://apis.google.com/js/plusone.js"></script>
{% endblock %}
{% block content %}
<div class="container">
    <div class="jumbotron">
        <h2><a href="{{ article.link  }}">{{ article.title|safe }}</a></h2>
        <h3>from <a href="/feed/{{ article.source.id }}">{{ article.source.title }}</a></h3>
        <a href="/delete/{{ article.id }}"><i class="glyphicon glyphicon-remove" title="Delete this article"></i></a>
        {% if article.like %}
            <a href="/like/{{ article.id }}"><i class="glyphicon glyphicon-star" title="One of your favorites"></i></a>
        {% else %}
            <a href="/like/{{ article.id }}"><i class="glyphicon glyphicon-star-empty" title="Click if you like this article"></i></a>
        {% endif %}
        <h6>{{ article.date }}</h6>
    </div>
    <div class="jumbotron">
        {{ article.content|safe }}
    </div>
    <div class="jumbotron">
        <a href="https://api.pinboard.in/v1/posts/add?url={{ article.link  }}&description={{ article.title }}" rel="noreferrer" target="_blank">
            <img src="/static/img/pinboard.png" title="Share on Pinboard" />
        </a>
        <a href="http://reddit.com/submit?url={{ article.link }}&title={{ article.title }}" rel="noreferrer" target="_blank">
            <img src="/static/img/reddit.png" title="Share on reddit" />
        </a>
        <g:plusone size="standard" count="true" href="{{ article.link  }}"></g:plusone>
    </div>
</div><!-- /.container -->
{% endblock %}