{% extends "base.html" %}

{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename = 'css/reading.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col s12 m4 l8">
            {% for year in data %}
            <span class="date">{{ year.year }}</span>
            <ul class="list">
                {% for book in year.books %}
                <li class="item" >
                    <div class="icon-title">
                        {% if book.star %}
                        <i class="tiny"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></i>
                        {% else %}
                        <i class="tiny"><span class="glyphicon glyphicon-book" aria-hidden="true"></span></i>
                        {% endif %}
                        <span class="title">{{ book.name }}</span>
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% endfor %}
        </div>

        <p>* Always be at least a little bit critical about what you learn...</p>
    </div>
    <br>
    <br>
</div>
{% endblock %}