{% extends "base.html" %}

{% block content %}
    {% include "base/include/header-hero.html" %}

    <div class="container bread-detail">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-7">
                    <div class="row">
                        {% if page.introduction %}
                            <p class="bread-detail__introduction">
                                {{ page.introduction }}
                            </p>
                        {% endif %}

                        <div class="hidden-md-down">
                            {{ page.body }}
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-md-offset-1">
                    <div class="row">
                        <div class="bread-detail__meta">
                            {% if page.origin %}
                                <p class="bread-detail__meta-title">Origin</p>
                                <p class="bread-detail__meta-content">{{ page.origin }}</p>
                            {% endif %}
                            {% if page.bread_type %}
                                <p class="bread-detail__meta-title">Type</p>
                                <p class="bread-detail__meta-content">{{ page.bread_type }}</p>
                            {% endif %}
                            {% with ingredients=page.ingredients.all() %}
                                {% if ingredients %}
                                    <h4>Ingredients</h4>
                                    <ul>
                                        {% for ingredient in ingredients %}
                                            <li>
                                                {% if ingredient.live %}
                                                    {# If it's live, show as-is #}
                                                    {{ ingredient.name }}
                                                {% else %}
                                                    {# EXAMPLE: we can show a placeholder element for instances that are not live #}
                                                    <span class="bread-detail__meta-ingredient--draft">
                                                        Draft ingredient
                                                    </span>
                                                    (draft)
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            {% endwith %}
                        </div>
                    </div>
                </div>

                <div class="col-md-7">
                    <div class="row hidden-md-up">
                        {{ page.body }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}