{% extends "base.html" %}
{% block content %}
<div class="uk-container">
  <div class="rx-head-container">
    <div class="rx-title-container">
      <ul class="rx-breadcrumb uk-text-truncate">
        <li class="rx-breadcrumb-item"><a href="/" alt="Home">Home</a></li>
        <li class="rx-breadcrumb-item">Collections</li>
      </ul>
  
      <div class="rx-title">{{ page.page_title }}</div>
      <div class="rx-title-tagline">{{page.tagline}}</div>
    </div>
  
    <p>{{ page.paragraph }}</p>
  </div>
  
<h1 class='uk-heading-medium'>{{ volume.label }}</h1>
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
    {% for page in volume.canvas_set.all %}
      <div class="uk-flex uk-flex-center uk-flex-middle">
      <a href="{% url 'page' volume.pid page.pid %}">
          <div class='uk-inline uk-box-shadow-small uk-box-shadow-hover-large'>
            <img src="{{ page.thumbnail }}" alt="Thumbnail for {{page.label }} of {{ volume.label }}" />
            <div class='uk-overlay uk-overlay-default uk-position-bottom'>
              <p>
                {{ page.label }}
              </p>
            </div>
          </div>
      </a>
    </div>
  {% endfor %}
</div>
</div>
{% endblock content %}