{% extends "_layouts/main" %}

{% block main %}

<ul class="breadcrumbs">
    <li><a href="/templates/drinks">Drinks</a></li>
    <li>{{ entry.title }}</li>
</ul>
<div class="full-bleed-header" style="background-size: 100%; height: 300px; background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url({{ entry.drinkImage.one().getUrl() }}); background-repeat: no-repeat, repeat;">
    <div class="page-title text-center">
        <h2 class="logo"><span class="scripty">{{ entry.title }}</h2>
        <p class="tagline reverse">Espresso</p>
    </div>
</div>
<div class="row">
    <div class="large-12 small-12 columns">
        <div class="intro large-12 small-12 columns text-center">
            <p>{{ entry.drinkIntro }}</p>
        </div>
		{{ entry.pageCopy }}
        {% set relatedRecipe = entry.relatedRecipe.one() %}
        {% if relatedRecipe %}
        <p><a href="{{ relatedRecipe.url }}" class="button primary small radius">Make <i>{{ entry.title }}</i> at Home</a></p>
        {% endif %}
    </div>
</div>

{% endblock %}