{% layout 'layouts/html.liquid' %}

{% block head %}
<title>books</title>
{% endblock %}

{% block content %}

<h1>Books</h1>

{% for book in booksArray %}
    <div class="book-card">
        <div class="card-left">
            <a href="{{ pageUrl }}/{{ book.slug }}">
                <img class="book-image" src="{{ book.image }}" alt="cover image for {{ book.title }}" />
            </a>
        </div>
        <div class="book-title"><a href="{{ pageUrl }}/{{ book.slug }}">{{ book.title }}</a></div>
        <div class="book-brief">{{ book.brief }}</div>
        <div class="book-author">by {{ book.author }}</div>
    </div>
{% endfor %}

<style>
    .book-card { }
    .book-card:not(:last-of-type) { margin-bottom: 20px; }
    .card-left { float: left; margin-right: 10px; }
    .book-image { width: 50px; float: left; }

</style>

<script>

</script>
{% endblock %}