{% extends 'base.html' %}

{% block header %}
<h1>{% block title %}Hakkoso{% endblock %}</h1>
{% endblock %}
{% block content %}
<!-- https://codepen.io/PJCHENder/pen/PKBVRO/ -->
<!-- <ul id="items-list" class="moveable"> -->
  <!--     <li>One</li> -->
  <!--     <li>Two</li> -->
  <!--     <li>Three</li> -->
  <!--     <li>Four</li> -->
  <!-- </ul> -->
<script>currently_editing_recipe('{{recipe.name}}');</script>
<div class="columns">
    <div class="column is-half">
<div class="field">
            <label class="label">Recipe Name</label>
            <div class="control">
              <input class="input" type="text" placeholder="Text input"
                     value="{{recipe.name}}">
            </div>
        </div>

        <div class="field">
            <label class="label">Description</label>
            <div class="control">
              <textarea class="textarea" placeholder="Recipe Description">
                {{recipe.description}}
              </textarea>
            </div>
        </div>
        Phase list:
        {% for phase in recipe.phases %}
        <div class="tile is-ancestor">
            <div class="tile is-vertical">
                <div class="tile">
                    <div class="tile is-parent is-vertical">
                      <article
                        onclick="edit_phase({{loop.index0}});"
                        class="tile is-child notification is-primary">
                            <p class="title"></p>
                            <p class="subtitle">{{ phase.name }}</p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="column is-half" id="phase-editor">
    </div>
</div>
</div>
{% endblock %}