{% 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>
<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">
            </div>
        </div>

        <div class="field">
            <label class="label">Description</label>
            <div class="control">
                <textarea class="textarea" placeholder="Recipe Description"></textarea>
            </div>
        </div>
        Phase list:
        <div class="tile is-ancestor">
            <div class="tile is-vertical">
                <div class="tile">
                    <div class="tile is-parent is-vertical">
                        <article class="tile is-child notification is-primary">
                            <p class="title"></p>
                            <p class="subtitle">Top tile</p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column is-half">
        <div class="field">
            <label class="label">Phase Name</label>
            <div class="control">
                <input class="input" type="text" placeholder="Phase Name">
            </div>
        </div>

        <div class="field">
            <label class="label">Phase Description</label>
            <div class="control">
                <textarea class="textarea" placeholder="Phase Description"></textarea>
            </div>
        </div>

        <div class="field">
            <label class="label">On Load</label>
            <div class="control">
                <textarea class="textarea" placeholder="#t"></textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">Next Condition</label>
            <div class="control">
                <textarea class="textarea" placeholder="(> (time-in-this-phase) (minutes 1))"></textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">On Exit</label>
            <div class="control">
                <textarea class="textarea" placeholder="#t"></textarea>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button class="button is-link">Submit</button>
            </div>
            <div class="control">
                <button class="button is-link is-light">Cancel</button>
            </div>
            <div class="control">
                <button class="button is-danger">Delete</button>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}