{% extends 'base.html' %}

{% block header %}
<h1>{% block title %}Hakkoso{% endblock %}</h1>
{% endblock %}
{% block content %}
<div class="columns">
    <div class="column is-half">
        <button class="button is-link">New Recipe</button>
        <br/>
        <br/>
        {% for recipe in recipes %}
        <div class="tile is-ancestor">
            <div class="tile is-vertical">
                <div class="tile">
                    <div class="tile is-parent is-vertical">
                        <article
                            onclick="edit_recipe({{loop.index0}});"
                            class="tile is-child notification is-primary">
                            <p class="title">{{ recipe.name }}</p>
                            <p class="subtitle">
                                {% for phase in recipe.phases %}
                                {{ phase.name }}
                                {% endfor %}
                            </p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="column is-half" id="phase-editor">
    </div>
</div>
</div>
{% endblock %}