{# Recipe Layout Template #}

{% extends "_layout" %}
{% block main %}
    <div class="page-title">
        <h2>{{ entry.title }}</h2>
        <h3>{{ entry.style }}</h3>
        <p>{{ entry.recipeTagline }} Originally brewed: {{ entry.originalBrewDate | date('F Y') }}</p>
    </div>

    <div class="panel radius snapshot">
        <h3>Brew Snapshot</h3>
        <ul>
            {% for item in entry.recipeSnapshot %}
                <li>{{ item.snapshotText }}</li>
            {% endfor %}
        </ul>
    </div>

    {% for block in entry.recipeContents %}

        {% switch block.type %}

        {% case 'recipeImage' %}
        {% set image = block.image.first() %}
        <div class="photo-inset">
            <img src="{{ image.url() }}"
                 alt="{{ image.title }}"/>
            {% if block.imageCaption %}
                <p class="caption">
                    <small>{{ block.imageCaption }}</small>
                </p>
            {% endif %}
        </div>

        {% case 'recipeCopy' %}
        {{ block.bodyContent }}

        {% case 'recipeIngredients' %}
        <table width="100%">
            <tr>
                <th width="20%">Amount</th>
                <th>Ingredient</th>
            </tr>
            {% for row in block.ingredients %}
                <tr>
                    <td>{{ row.amount }}</td>
                    <td>{{ row.ingredient }}</td>
                </tr>
            {% endfor %}
        </table>

        {% case 'recipeSteps' %}
        <div class="steps">
            <h4>{{ block.stepsTitle }}</h4>
            <ol>
                {% for step in block.stepsSteps %}
                    <li>{{ step.stepInstructions }}</li>
                {% endfor %}
            </ol>
        </div>

        {% case 'recipeTip' %}
        <div class="panel tip">
            <p>{{ block.tipContent }}</p>
        </div>

        {% endswitch %}
    {% endfor %}
{% endblock %}