{% extends "base.html" %}
{% load wagtailcore_tags navigation_tags wagtailimages_tags %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>{{ page.title }}</h1>
            <p>{{ page.introduction}}</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
    {% for bread in breads %}
            <div class="col-xs-12 col-md-6">
            <a href="{% pageurl bread %}">
                <div class="row">
                    <div class="col-xs-4">
                    {% image bread.image fill-180x180-c100 as image %}
                                    <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
                    </div>
                    <div class="col-xs-6">
                        <h2>{{ bread.title }}</h2>
                        <ul class="bread-meta list-inline">
                            <li>{{ bread.origin }}</li>
                            <li>{{ bread.bread_type }}</li>
                        </ul>
                    </div>
                </div>
            </a>
            </div>
    {% endfor %}
    </div>
</div>


{% if breads.paginator.count > 1 %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
        {% include "includes/pagination.html" with subpages=breads %}
        </div>
    </div>
</div>
{% endif %}
{% comment %}
        {% if resources.has_other_pages %}
    <div class="clearfix">
      <div class="pagination-wrapper">
        <ul class="pagination">
          {% if resources.has_previous %}
            <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.previous_page_number }}" class="arrow-left"></a></li>
          {% else %}
            <li class="arrows disabled"><span class="arrow-left"></span></li>
          {% endif %}
          {% for i in resources.paginator.page_range %}
            {% if resources.number == i %}
              <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
            {% else %}
              <li><a href="?q={{ query_string|urlencode }}&amp;page={{ i }}">{{ i }}</a></li>
            {% endif %}
          {% endfor %}
          {% if resources.has_next %}
            <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.next_page_number }}"><i class="arrow-right"></i></a></li>
          {% else %}
            <li class="arrows disabled"><span><i class="arrow-right"></i></span></li>
          {% endif %}
        </ul>
      </div>
    </div>
    {% endif %}
{% endcomment %}
{% endblock content %}