{% extends "coderedcms/pages/web_page.html" %}
{% load wagtailcore_tags wagtailimages_tags coderedcms_tags %}

{% block index_content %}
<div class="container">
    <div class="row d-flex">
        {% for cupcake in page.get_children.specific %}
        <div class="col m-3">
            <div class="card border-cherry" style="width: 18rem;">
                {% if cupcake.photo %}
                {% image cupcake.photo fill-300x300 as cupcake_photo %}
                <a href="{{cupcake.url}}">
                    <img class="card-img-top w-100" src="{{cupcake_photo.url}}" alt="{{cupcake.title}}">
                </a>
                {% endif %}
                <div class="card-body">
                <div class="card-text">
                    <h3><a class="text-cherry" href="{{cupcake.url}}">{{cupcake.title}}</a></h3>
                    <p class="lead">{{cupcake.days_available}}</p>
                </div>
                </div>
            </div>
        </div>
        {% endfor %}   
    </div>
</div>
{% endblock %}