{% extends "layout.html" %}
{% block content %}

<div id="container">
    {% for answer in answers %}
    <div class="card">
        <div class="panel panel-default">
            <div class="list-group">
                <div class="list-group-item">
                    <h4 class="list-group-item-heading">{{ answer.question }}</h4>
                </div>
                <div class="list-group-item">
                    <p class="list-group-item-text">{{ answer.answer }}</p>
                </div>
            </div>
            <div class="panel-footer">
                <small>{{ answer.author }} asked at <a href="https://twitter.com/{{screen_name}}/status/{{answer.tweet_id}}/" target="_blank">{{answer.timestamp}}</a></small>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if show_previous %}
       <div class="previous">
           <a href="/ask/answers{% if (page - 1) > 1 %}/{{page - 1}}{% endif %}" class="btn btn-default btn-xs active" role="button">Previous</a>
       </div>
    {% endif %}
    {% if show_next %}
       <div class="next">
           <a href="/ask/answers/{{page + 1}}" class="btn btn-default btn-xs active" role="button">Next</a>
       </div>
    {% endif %}
</div>

{% endblock %}