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

{% block head %}
  <title>smartsite</title>
<style>
  hr { margin: 60px 0; }

  .book-heading { margin-bottom: 60px;}
  .image-col { text-align: center; }
  .book-cover { width: 50%; border: 2px solid #ddd; box-shadow: 2px 2px 5px #ddd;}
  .login-cta { border: 1px solid black; padding: 20px; font-size: 1.2em; }

  .book h1, .book h2, .book h3, .book h4, .book h5, .book h6 { color: #000; }
  .book video { max-width: 80%; max-height: 45vh; border: 1px solid #ddd; box-shadow: #ddd 5px 5px 5px; padding: 2%; }
  .book img { max-width: 80%; max-height: 45vh; border: 1px solid #ddd; box-shadow: #ddd 5px 5px 5px; padding: 2%; }
  .book pre { background-color: #f5f5f5; padding: 2%; border-radius: 2%; border: 1px solid #ddd; }
  .book code { background-color: #f5f5f5; }

</style>
{% endblock %}

{% block content %}

<div class="book-heading">
  <div class="row">
    <div class="col-6">
      <h1 id="book-title">{{ book.title }}</h1>
      <p><em>{{ book.brief }}</em></p>
      <a href="/books/{{ book.slug }}/read" class="btn btn-lg btn-dark">Read now</a>
      {% if book.links %}
        {% for link in book.links %}
          <p class="mt-2"><a href="{{ link.url }}">{{ link.text }}</a></p>
        {% endfor %}
      {% endif %}
    </div>
    <div class="col-6 image-col">
      <img src="{{ book.image }}" class="book-cover" alt="cover for book {{ book.title }}">
    </div>
  </div>
</div>

{% if book.information %}
  {{ book.information }}
{% endif %}
  
<div class="text-center login-cta mb-4"><a href="/books/{{ book.slug }}/read">Read now</a></div>

<div class="text-center">{{ book.title }} &copy; {{ book.author }}</div>

{% endblock %}